Simple jQuery fullscreen image gallery
The code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>malihu jQuery Image Gallery</title>
<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
html,body{height:100%;}
*{outline:none;}
body{margin:0px; padding:0px; background:#000;}
#toolbar{position:fixed; z-index:3; right:10px; top:10px; padding:5px; background:url(fs_img_g_bg.png);}
#toolbar img{border:none;}
#img_title{position:fixed; z-index:3; left:10px; top:10px; padding:10px; background:url(fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;}
#bg{position:fixed; z-index:1; overflow:hidden; width:100%; height:100%;}
#bgimg{display:none; -ms-interpolation-mode: bicubic;}
#preloader{position:relative; z-index:3; width:32px; padding:20px; top:80px; margin:auto; background:#000;}
#thumbnails_wrapper{z-index:2; position:fixed; bottom:0; width:100%; background:url(empty.gif); /* stupid ie needs a background value to understand hover area */}
#outer_container{position:relative; padding:0; width:100%; margin:40px auto;}
#outer_container .thumbScroller{position:relative; overflow:hidden; background:url(fs_img_g_bg.png);}
#outer_container .thumbScroller, #outer_container .thumbScroller .container, #outer_container .thumbScroller .content{height:170px;}
#outer_container .thumbScroller .container{position:relative; left:0;}
#outer_container .thumbScroller .content{float:left;}
#outer_container .thumbScroller .content div{margin:5px; height:100%;}
#outer_container .thumbScroller img{border:5px solid #fff;}
#outer_container .thumbScroller .content div a{display:block; padding:5px;}
.nextImageBtn, .prevImageBtn{display:block; position:absolute; width:50px; height:50px; top:50%; margin:-25px 10px 0 10px; z-index:3; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;}
.nextImageBtn:hover,.prevImageBtn:hover{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;}
.nextImageBtn{right:0; background:#000 url(nextImgBtn.png) center center no-repeat;}
.prevImageBtn{background:#000 url(prevImgBtn.png) center center no-repeat;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
</head>
<body>
<div id="bg"><a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="images/Universe_and_planets_digital_art_wallpaper_denebola.jpg" width="1680" height="1050" alt="Denebola" title="Denebola" id="bgimg" /></div>
<div id="preloader"><img src="ajax-loader_dark.gif" width="32" height="32" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="toolbar_fs_icon.png" width="50" height="50" /></a></div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_denebola.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_denebola_thumb.jpg" title="Denebola" alt="Denebola" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_lux.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_lux_thumb.jpg" title="Lux Aeterna" alt="Lux Aeterna" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_dk.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_dk_thumb.jpg" title="X-Wing on patrol" alt="X-Wing on patrol" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_albireo.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_albireo_thumb.jpg" title="Albireo Outpost" alt="Albireo Outpost" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_church.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_church_thumb.jpg" title="Church of Heaven" alt="Church of Heaven" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_Decampment.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_Decampment_thumb.jpg" title="Decampment" alt="Decampment" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_Hibernaculum_thumb.jpg" title="Hibernaculum" alt="Hibernaculum" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_lucernarium.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_lucernarium_thumb.jpg" title="Supremus Lucernarium" alt="Supremus Lucernarium" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_moons.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_moons_thumb.jpg" title="Aurea Mediocritas" alt="Aurea Mediocritas" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_praedestinatio.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_praedestinatio_thumb.jpg" title="Praedestinatio" alt="Praedestinatio" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_transitorius.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_transitorius_thumb.jpg" title="Transitorius" alt="Transitorius" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="images/Universe_and_planets_digital_art_wallpaper_victimofgravity.jpg"><img src="images/Universe_and_planets_digital_art_wallpaper_victimofgravity_thumb.jpg" title="Victim of Gravity" alt="Victim of Gravity" class="thumb" /></a></div>
</div>
</div>
</div>
</div>
</div>
<script>
//config
//set default images view mode
$defaultViewMode="full"; //full, normal, original
$tsMargin=30; //first and last thumbnail margin (for better cursor interaction)
$scrollEasing=600; //scroll easing amount (0 for no easing)
$scrollEasingType="easeOutCirc"; //scroll easing type
$thumbnailsContainerOpacity=0.8; //thumbnails area default opacity
$thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out
$thumbnailsOpacity=0.6; //thumbnails default opacity
$nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")
$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")
//cache vars
$thumbnails_wrapper=$("#thumbnails_wrapper");
$outer_container=$("#outer_container");
$thumbScroller=$(".thumbScroller");
$thumbScroller_container=$(".thumbScroller .container");
$thumbScroller_content=$(".thumbScroller .content");
$thumbScroller_thumb=$(".thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg=$("#bgimg");
$img_title=$("#img_title");
$nextImageBtn=$(".nextImageBtn");
$prevImageBtn=$(".prevImageBtn");
$(window).load(function() {
$toolbar.data("imageViewMode",$defaultViewMode); //default view mode
if($defaultViewMode=="full"){
$toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
} else {
$toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
}
ShowHideNextPrev($nextPrevBtnsInitState);
//thumbnail scroller
$thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin
sliderLeft=$thumbScroller_container.position().left;
sliderWidth=$outer_container.width();
$thumbScroller.css("width",sliderWidth);
var totalContent=0;
fadeSpeed=200;
var $the_outer_container=document.getElementById("outer_container");
var $placement=findPos($the_outer_container);
$thumbScroller_content.each(function () {
var $this=$(this);
totalContent+=$this.innerWidth();
$thumbScroller_container.css("width",totalContent);
$this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
});
$thumbScroller.mousemove(function(e){
if($thumbScroller_container.width()>sliderWidth){
var mouseCoords=(e.pageX - $placement[1]);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
if(mouseCoords>destX){
$thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
} else if(mouseCoords<destX){
$thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
} else {
$thumbScroller_container.stop();
}
}
});
$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
$thumbnails_wrapper.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo("slow", 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
}
);
$thumbScroller_thumb.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
}
);
//on window resize scale image and reset thumbnail scroller
$(window).resize(function() {
FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));
$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc");
var newWidth=$outer_container.width();
$thumbScroller.css("width",newWidth);
sliderWidth=newWidth;
$placement=findPos($the_outer_container);
});
//load 1st image
var the1stImg = new Image();
the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
the1stImg.src = $bgimg.attr("src");
$outer_container.data("nextImage",$(".content").first().next().find("a").attr("href"));
$outer_container.data("prevImage",$(".content").last().find("a").attr("href"));
});
function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
$this.fadeOut("fast",function(){
$this.attr("src", "").attr("src", imgSrc); //change image source
FullScreenBackground($this,imageWidth,imageHeight); //scale background image
$preloader.fadeOut("fast",function(){$this.fadeIn("slow");});
var imageTitle=$img_title.data("imageTitle");
if(imageTitle){
$this.attr("alt", imageTitle).attr("title", imageTitle);
$img_title.fadeOut("fast",function(){
$img_title.html(imageTitle).fadeIn();
});
} else {
$img_title.fadeOut("fast",function(){
$img_title.html($this.attr("title")).fadeIn();
});
}
});
}
//mouseover toolbar
if($toolbar.css("display")!="none"){
$toolbar.fadeTo("fast", 0.4);
}
$toolbar.hover(
function(){ //mouse over
var $this=$(this);
$this.stop().fadeTo("fast", 1);
},
function(){ //mouse out
var $this=$(this);
$this.stop().fadeTo("fast", 0.4);
}
);
//Clicking on thumbnail changes the background image
$("#outer_container a").click(function(event){
event.preventDefault();
var $this=$(this);
GetNextPrevImages($this);
GetImageTitle($this);
SwitchImage(this);
ShowHideNextPrev("show");
});
//next/prev images buttons
$nextImageBtn.click(function(event){
event.preventDefault();
SwitchImage($outer_container.data("nextImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
});
$prevImageBtn.click(function(event){
event.preventDefault();
SwitchImage($outer_container.data("prevImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
});
//next/prev images keyboard arrows
if($keyboardNavigation=="on"){
$(document).keydown(function(ev) {
if(ev.keyCode == 39) { //right arrow
SwitchImage($outer_container.data("nextImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
return false; // don't execute the default action (scrolling or whatever)
} else if(ev.keyCode == 37) { //left arrow
SwitchImage($outer_container.data("prevImage"));
var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
GetNextPrevImages($this);
GetImageTitle($this);
return false; // don't execute the default action (scrolling or whatever)
}
});
}
function ShowHideNextPrev(state){
if(state=="hide"){
$nextImageBtn.fadeOut();
$prevImageBtn.fadeOut();
} else {
$nextImageBtn.fadeIn();
$prevImageBtn.fadeIn();
}
}
//get image title
function GetImageTitle(elem){
var title_attr=elem.children("img").attr("title"); //get image title attribute
$img_title.data("imageTitle", title_attr); //store image title
}
//get next/prev images
function GetNextPrevImages(curr){
var nextImage=curr.parents(".content").next().find("a").attr("href");
if(nextImage==null){ //if last image, next is first
var nextImage=$(".content").first().find("a").attr("href");
}
$outer_container.data("nextImage",nextImage);
var prevImage=curr.parents(".content").prev().find("a").attr("href");
if(prevImage==null){ //if first image, previous is last
var prevImage=$(".content").last().find("a").attr("href");
}
$outer_container.data("prevImage",prevImage);
}
//switch image
function SwitchImage(img){
$preloader.fadeIn("fast"); //show preloader
var theNewImg = new Image();
theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
theNewImg.src = img;
}
//get new image dimensions
function CreateDelegate(contextObject, delegateMethod){
return function(){
return delegateMethod.apply(contextObject, arguments);
}
}
//new image on load
function theNewImg_onload(){
$bgimg.data("newImageW",this.width).data("newImageH",this.height);
BackgroundLoad($bgimg,this.width,this.height,this.src);
}
//Image scale function
function FullScreenBackground(theItem,imageWidth,imageHeight){
var winWidth=$(window).width();
var winHeight=$(window).height();
if($toolbar.data("imageViewMode")!="original"){ //scale
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
if ((winHeight / winWidth) < picHeight) {
$(theItem).attr("width",winWidth);
$(theItem).attr("height",picHeight*winWidth);
} else {
$(theItem).attr("height",winHeight);
$(theItem).attr("width",picWidth*winHeight);
};
} else { //normal size image mode
if ((winHeight / winWidth) > picHeight) {
$(theItem).attr("width",winWidth);
$(theItem).attr("height",picHeight*winWidth);
} else {
$(theItem).attr("height",winHeight);
$(theItem).attr("width",picWidth*winHeight);
};
}
$(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
$(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
} else { //no scale
$(theItem).attr("width",imageWidth);
$(theItem).attr("height",imageHeight);
$(theItem).css("margin-left",(winWidth-imageWidth)/2);
$(theItem).css("margin-top",(winHeight-imageHeight)/2);
}
}
//Image view mode function - fullscreen or normal size
function ImageViewMode(theMode){
$toolbar.data("imageViewMode", theMode);
FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));
if(theMode=="full"){
$toolbar_a.html("<img src='toolbar_n_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
} else {
$toolbar_a.html("<img src='toolbar_fs_icon.png' width='50' height='50' />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
}
}
//function to find element Position
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curtop, curleft];
}
</script>
</body>
</html>
Pages: 1 2
AMAZING THANK YOU
Hi,
This is AMAZING thank you. I was just wondering, is there a way NOT to enlarge photos that are not big enough by default to fill the screen. Currently, smaller pictures just get enlarged (and so become blurry)
thank you
You can set the $defaultViewMode to “normal” or “original” in the first line of the script.
Hi,
thank you for the answer. I was more referring to a case, where we have 10 images in the gallery 8 are big enough to be fullscreen, but 2 are small (800×600).
Hi, Manos!
Your gallery is simply amazing and beautiful! I was going to install it to my web-site and tested it on all devices including iPhone and iPad, and all was working just fine. But a few days ago new system update from Apple changed it… thumbs scrolling doesn’t work any longer on iPhone and iPad.
Can you give me any advice on how to change the files to make in working again? Thank you!
Simply amazing gallery!
I was just wandering whether this is theoretically possible: I have tried to do this but didn’t succeed. Is it possible to add to this gallery the vertical, basically folders?
When you mouseover any picture in the horizontal scrolling slideshow, the vertical scrolling stripe with photos above it appears. This would be a great solution if you need to insert a lot of photos sorted into galleries or albums.
Can somebody explain me how I can do that?
Thanks!
*I cannot scroll the images in the gallery – this is what i meant above. Thanks.
Malihu, I cannohe gallery to scroll the images in the gallery if they are bigger than the screen and when maximized. What should I add, so that I can scroll and see the whole image?
Thank you!
Hello Malihu,
Thank you for your contribution to the web design community. This gallery you made is beautiful.
I just want to point out an issue I noticed where people can easily download all images with just a click using Firefox and videodownloadhelper.
It’s kind of strange because I thought such programs worked only with flash video but it seems to work on this gallery here.
I wonder if anyone here knows of any way to prevent such apps as mentioned above from downloading all images that easily.
As with Malihu, I know you are extremely busy with life but just giving you the heads up!
Thanks for the contribution and thanks for your time.
Hi!
Great gallery!
I need to add social sharing buttons on each image of the gallery.
I’m not able to do that!
Does anyone know how to do it?
thanks in advance.
As you may have already heard from others. Thanks! Your work is much appreciated. I’m looking forward to your Ver. 2
Hello there.
I really appreciate your work!
I would like to use your gallery and i already tried to modify it for my interests but there is one thing i still struggle with.
I want to place my own content over the gallery – means itself is on the background so i don’t need the thumbnail-frame and would like to delete it.
How can i make it without crashing the whole thing?
In addition, when i place new divs he won’t show any styles and texts in them. Only pictures. How is that? Hope you can help me.
Thank you so much!
Hello! outstanding work!
I would like to know where it is possible modify the code to limit the gallery specified sizes.
Ideally, the maximize button displays a gallery of a given size to full size and back.
Is it possible to put this on a website but still keep your nav bar at the top?
Hello,
I’m currently finishing an update on this gallery which among others, will allow you to place multiple galleries, wherever you want in your page. I’ll publish the new version in a couple of days.
Oh, that is great! Thank you so much.
Hi again Malihu , did I already tell you that your work is wonderful ?
Thank you so much for those .
Just a question : the images you use for the demo ( the space images ) where did you take those ? Which type of license they have ? Can I just use it on my web site or video or something?
Thank you so much for everything.
Mauro
Hi Malihu
First, The Script is great ..thank you , thank you
Was crawling the web for days trying to find something with this functionality.
Second, Seems to be having a issue with the scrolling of the thumbnails and wondered if it was something obvious
Here is the url:
http://www.amongthetorrent.com/site4/
The gallery currently resides under the Environment Design and Game Art tab.
Third, I would like to add a 4 more different gallery to each slider and wonder if this is possible as my efforts so far have been futile
Fourth, Hoping our holiday season goes well Malihu and look forward to your response.
R
Hello and thanks for your comments.
You might try removing the 2nd jQuery (1.4) inclusion in your head tag and/or try placing all your scripts at the bottom (before the closing body tag) of your document.
To have multiple galleries is not that simple at the moment (when I update the gallery I’ll make it very simple). You need to move the gallery script on a separate .js document (which you’ll include in your page) and place each gallery script inside a unique function and then call each function separately. If I get some time I might make a quick modification to it and send it to you but I can’t really promise anything…
Removed the problematic jQuery (1.4) and the scrolling works.. Thnx Malihu
Thnx also for pointing me in the right direction with the multiple galleries. Been working on it for the last few days with no avail but learning alot. If there is anything I can do to help expedite the solution to this please let me know.. Thnx again Malihu for the marvelous script and prompt response
Malihu is there anyway I could pay/ donate to you to expedite the script? I have a client who is most impatient..Please
Thnx Ron
Hi Ron,
Sent me an e-mail with the details.
What a wonderful script ! ( what a wonderful site )
I have quite a problem , anyway
Is there a way to change the speed of the thumbnails scrolling? I have many item and the movement is really fast. The only way to slow down it’s using smaller icon ?
Thanks a lot !!!
Not really. At the moment, the scrolling speed is determined by the cursor position, so your mouse movement sets the speed. You can only change the $scrollEasing variable and see how it affects scrolling.
I’m planning on updating this gallery (in a couple of months) and implement a much more advanced scroller that will have additional ways of scrolling the thumbnails.
Thanks a lot Malihu for your kindly reply .
I was just trying that, but the result it seems not really good .
QUOTE: “I’m planning on updating this gallery (in a couple of months) and implement a much more advanced scroller that will have additional ways of scrolling the thumbnails.”
This is really great ! A wonderful script can become better ? In Malihu’s house it’s possible !
Thanks , really; you’re doing a great job .
Is there a way to slow down thumbnails scrolling? If there are many scrolling is wayyy to fast:)
This is in the config script .. Change 600 to 0 in $scrollEasing
From:
$scrollEasing=600; //scroll easing amount (0 for no easing)To:
$scrollEasing=0; //scroll easing amount (0 for no easing)Hi Malihu,
Any updates on http://pritesh.info/vivid-photo-2/richard
I need help with my site or atleast the files that can be uploaded to run it correctly.
Your help is very much appreciated.
Hey Malihu-
First of all, I wanted to thank y0u for the great plugin! It’s amazing-
I have been working with yours and GehanR’s php code to try to get this plugin to work with wordpress, and I’m having a little bit of trouble. I’m currently calling both the javascript and css externally, but for some reason I can’t get things to load up properly?
The CSS loads up fine in the header with the following code, and when I view the source it looks like the javascript is loading just fine in the footer as well, but the changes aren’t being made to the final site. Any ideas? This is all being done inside the functions.php file.
function malihu_gallery() { if (!is_admin()) { // Enqueue Malihu Gallery JavaScript wp_register_script('malihu-jquery-image-gallery', get_template_directory_uri(). '/js/malihu-jquery-image-gallery.js', array('jquery'), 1.0, true ); wp_enqueue_script('malihu-jquery-image-gallery'); // Enqueue Malihu Gallery Stylesheet wp_register_style( 'malihu-style', get_template_directory_uri() . '/CSS/malihu_gallery.css', 'all' ); wp_enqueue_style('malihu-style' ); } } add_action('init', 'malihu_gallery');Figured it out! It turns out it was just a jQuery conflict- wrapping the entire code in a noconflict wrapper settled things nicely. Thanks again for the great script Malihu!
AWESOME Gallery! I’ve implemented it in the photo section of my website — http://www.DowntownDebauchery.com and it seems to be working just fine in Firefox, but in IE its a different story. If you could PLEASE look over the code and let me know if you can help me get it to work in IE it would be greatly appreciated. Thanks Malihu!
hello malihu,
amazing work …:)
How could i put a link in the background image?
thx for help
Hello
wonderful gallery
))
I have a question:
it is possible that, in the image description can install an external link?
if so can … send me the code
Thank you very much
Hi malihu,
Plugin is awesome but i want left and right scrolling. how it is possible
check the demo here. i like same right and left scrolling.
http://foundation.zurb.com/docs/orbit.php
Hi guys,
first of all many thanks to the developer for creating this awesome image gallery and posting it up for free, for anyone to use.
greatly appreciate the effort and the work done!!
i was adopting it to use in one of my sites, and thought of tweaking it a bit so that it can pick the images to be displayed from a specified folder.
so, i changed it into a php file and put in a few lines of code that will read a specified folder, file by file and output the correct code inside the html. this way, you only need to change one variable (the folder path) and it will display all images inside that folder in the gallery.
i also modified the img tag a little bit to use a scaled down version of the same file as the thumbnail image (just coz i was too bored to create another file to use as the thumbnail).
another modification i’m thinking of doing at the moment is, putting all the image captions into a single text file and then have the script display it line by line for each image.
hope this helps someone out there
cheers,
you can find the source files here:
https://dl.dropbox.com/u/16847140/fsbkg_upload.zip
Hey, this is awesome!
I want so much to add some back-end functionality in the gallery but it seems I never have enough time to do it. Thanks a ton for posting this
Thanks, Malihu, aren’t nearly enough — whether by great wisdom despite youth, or the kind-heartedness that experience too often hides, you’ve given a great deal of your time to helping others and, more importantly? Appreciating the efforts of others.
I’ve probably less than you should already have comin’ in, and money ain’t as valuable as what I’m hopin’ finds you, but I’m gonna send you some of it anyhow.
Good folks never seem to have enough time, but I’ll look into givin’ a bit of my own to “… add some back-end functionality” to this gallery, ’cause it’s far easier/better to build upon solid foundation(s) than to try ‘n fix what shoulda never been done.
And, the price is *perfect* for this dirt-poor poor-dirt farmboy.
Thanks a lot for your donation and more importantly, for your kind comments
I really appreciate your support.
Brilliant your very nice gallery, it hears that tendria that to modify in order that on having given click in a thumbail I change to another page, as if it was using the thumbail of menu
Nice Works dude, is there an autoplay option for it?
I tried to add another Div just like the title but the content of this div doesn’t change even if you click on the different thumbnails. My problem is the div doesn’t show. How can I add a div? thanks
Hi, Great script! I have a problem though, when I don’t give a title attribute to a certain image (as I don’t want to display a title with every image), it displays the title of the previous image, which has a title. Is there a way to fix this?
Thanks in advance
Kind regards
Bart
Hi!
Thanks a lot for the fullscreen gallery plugin, I am working on a site for a photographer and he is really happy with how this will showcase his work. I know you are super busy, but I am having trouble getting the next and previous buttons to move beyond the first and 5th image and not sure where I went wrong. I am also at a loss for the jQuery easing of the thumbnails on the iOS devices and wondered if you might have a suggestion on how to get that effect on them? Right now you can’t scroll past the last thumbnail.
Thanks so much!
Heather
hi
This is an amazing slider. but I wonder how we could add a transparent text description below the full screen image.
if you could help me out.
thanx.
Hello.
Thanks for this jQuery gallery. I was wondering how to change the way mousemove event works on the thumbscroller. Instead of jumping to the position in the slideshow comparing to the percentage, then if would be very nifty if when the cursor nears the left edge of the screen, then the thumbsscroller srolls to the left and vice versa…
This would make it possible to use this script with large imagesets…
Any ideas how to implement this? And was it even understandable
Hey man, I’ve became great fan of yours, I’ve used the thumbnail scroller and now I’m playing with this gallery.
Tell me something, I’m trying to embed videos (youtube/vimeo/etc) in the gallery so it will reproduce the videos in fullscreen, how awesome would be that huh?! But I tried some things and couldn’t get it to work, any thoughts?
Thanks and congrats on your work!!!
Hello,
This is strictly an image gallery and doesn’t support other media (video, audio etc.). Loading videos would require a totally different script so there’s no quick or easy way of doing it.
I’ll definitely create a video gallery in the future or maybe implement video support in this one.
Thanks for your comments and feedback
thanks! I’m a beginner at this so I was wondering if I put this on my website how do I add a [x] button so that the user can close the slideshow?
This gallery is a standalone script so it doesn’t “close” (as there’s nothing below it). You can normally navigate to a previous/next page using browser’s back/forward buttons.
Hi, works a treat apart from ipad?
Anyone have a fix?
Thanks.
Is there any easy way to get the images to change every x amount of seconds?
Not at the moment. I’ll include such feature on a future update.
Let’s say this is buying time for malihu and the future update. I know we are all busy with projects and life. So feel free to use my quick modification/addition to the script.
Just Add the code snippet at the end of malihu’s script.
Here we go:
// START: AUTO-PLAY IMAGE GALLERY var interval = 5000; // sets the interval between switching images var playtime; // combines the switch to next image and the interval // start the slideshow play(); // function to start the slideshow function play(){ StartSlideshow(); playtime = setInterval(StartSlideshow,interval) } // function to stop the slideshow function StopSlideshow(){ clearTimeout(playtime); } // switch to the next image function StartSlideshow(){ SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); } // stop the slideshow $('a').bind('click',function(e){ StopSlideshow(); e.preventDefault(); }); // END: AUTO-PLAY IMAGE GALLERYI kept it very simple. The slideshow will stop just after clicking any “a”-link.
I didn’t include a start/stop function as i did not need it, but it should be easy to modify the code to include such functionality. Just define a class instead of “a” and call a second function to start the slideshow again.
The code snippet should be pretty much self-explaining.
Important: Before someone bumps into this problem!
If you use other navigation elements or links besides them provided by the image gallery, you need to drop the
e.preventDefaultin this example. Otherwise it will prevent additional individual links/navigation elements from working properly.Please change the following part of the code from:
// stop the slideshow $('a').bind('click',function(e){ StopSlideshow(); e.preventDefault(); });to this(by leaving out the
e.preventDefault):// stop the slideshow $('a').bind('click',function(){ StopSlideshow(); });or define all style-elements that are allowed to stop the slide show, for example the thumbnails and the next-prev buttons:
// stop the slideshow $('#outer_container a, .nextImageBtn, .prevImageBtn').bind('click',function(e){ StopSlideshow(); e.preventDefault(); });As I said before its used for a project and was fine for me as I didn’t use any other navigation elements/links.
Thanks a ton for your codes
I’ll work heavily on this gallery and its thumbnail scroller in a few weeks. I’m currently updating the custom scrollbar plugin and sideways gallery which is very time consuming, so updates can get a bit slow… Thanks again!
You’re welcome. I appreciate you work with both scripts and feel honored to add a small modification that might help fellow developers.
If you don’t mind please add the changes I suggested in the second reply to my first reply/post.
Cheers from Cape Town,
LX
This is fantastic… Thank you! I wonder though, is there a way to delay the first change of image until the first image actually loads?
Since the first image takes a few seconds to load, it is only displayed very briefly before it transitions to the next slide.
I’m very new to php, but I guess there is a sleep() or .setTimeout function that may be able to do this but I haven’t been able to make it work.
Please Help!
The ajax.googleapis/ajax/libs… script is causing me problems
<!-- //Javascript code goes here for now $(function() { $( "#tabs" ).tabs(); }); -->This script tag seems to be the culprit of might site breaking.
I want to scale down your image gallery so that is fits inside my tabbed website. Right now when I add the code it breaks the website . What properties should I change in my code or your code to make it fit inside my div
#wrapper{
width:950px;
margin-left:auto;
margin-right:auto;
}
#tabs{
overflow:hidden;
margin-top:50px;
width:950px;
margin-left:auto;
margin-right:auto;
}
Hello,
How do the preloader only loads once per picture and not be repeated in each see that Let us review the already loaded?
Thanks
Awesome!!!
This is an awesome gallery! Having a problem with it though – everything loads fine, but whenever an arrow or thumbnail is clicked, the next image never loads. It just displays the loading icon forever – same problem in all browsers. My images are all 1440×1080, so it shouldn’t be a size issue. Here is the faulty page: http://sebastianbiermanlytle.com/galleries/dm-photos.htm
The strange part is that the code on this page is identical: http://sebastianbiermanlytle.com/galleries/photos.htm, and your gallery works just fine. I’ve been checking for discrepancies but haven’t found any.
I get “Internal Server Error” when I try to access directly the file: http://sebastianbiermanlytle.com/galleries/_dm-photos/lionfish4.jpg so the script cannot load it.
Ahh yeah, looks like Dreamweaver never uploaded the images, only the thumbnails.. Thanks for the help – I’ll link back to this page in my acknowledgments
Great Script you wrote man!!
Is it possible to use vimeo urls or iframes?
I hope so
Best
No, just images
Ok thnx!
It wont play well ajax calls to load the images into the content divs. when i do that it doesnt show up in the thumbnail panel
Hi Malihu, excellent work! Is what I was looking for!! Only wondering if I can link the js externally. I did it with css but it doesn’t work with js because probably the functions need to be “called” or onloaded in the body (sorry I don’t know javascript…just guessing and using terminology not properly…). The reason is I need to use the gallery in more than 20 pages in the same website (3 thumbs in each page) and if I have to repeat it in each page I fear that the navigation could be slowered . Any suggestion? Any help would be greatly appreciated! Thank you. Marzia
well, probably my request was not worthy to be answered (I understand I should know at least the basics) but I’m stuck here and I need to solve the problem somehow. Please, I only ask you if it possible to link the code outside (yes or no) so I may start researching how to do it myself or involve someone else expert to do it for me. Thank you Mahilu, you answer wiil be greatly appreciated.
Hello Marzia,
The archive below contains the demo gallery that loads the script externally:
http://manos.malihu.gr/tuts/malihu-jquery-image-gallery/malihu-jquery-image-gallery-external-js.zip
Sorry for late replies. It’s not that requests are not worthy, it’s that I get a lot of them.
Thanks from the heart maihilu! I noticed it seems that you just took the code outside and linked normally. Now I have to check what I did wrong the first time and if there any other js codes (in my page) conflicting with it. I’l let you know. Thank you again. Marzia
Tutorial is excellent, thanks a lot.. Can i add “auto play” options too?
Could anybody please explain how can i add “auto play” function??
I wrote a couple of functions that allow a “timed” gallery to act like a slideshow. When you click “play” the toolbar button changes from “play” to “pause” and automatically hides the thumbnail bar. I have also added a button to “hide thumbnails” manually.
var timer; $($autoLoopBtn).click(function(event){ event.preventDefault(); if($($autoLoopBtn).hasClass('start')){ $thumbnailsContainerMouseOutOpacity=0; $('.loopBtn > img').attr('src','loop-disabled-icon.png').attr('title', 'Stop auto-loop'); $thumbnails_wrapper.fadeTo(fadeSpeed, 0); timer = setInterval ( startAuto, $autoDelay ); } else { $thumbnailsContainerMouseOutOpacity=0.8; $('.loopBtn > img').attr('src','loop_icon.png').attr('title', 'Start auto-loop'); $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity); stopAuto(); } }); function startAuto(){ $('.loopBtn > img').attr('src','loop-disabled-icon.png').attr('title', 'Stop auto-loop'); $($autoLoopBtn).removeClass('start'); SwitchImage($outer_container.data("nextImage")); var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']"); GetNextPrevImages($this); GetImageTitle($this); } function stopAuto(){ clearInterval(timer); $('.loopBtn > img').attr('src','loop_icon.png').attr('title', 'Start auto-loop'); $($autoLoopBtn).addClass('start'); }I also modified the
#outer_container aclick event//Clicking on thumbnail changes the background image $("#outer_container a").click(function(event){ event.preventDefault(); stopAuto(); var $this=$(this); GetNextPrevImages($this); GetImageTitle($this); SwitchImage(this); ShowHideNextPrev("show"); });…so that when a thumbnail is clicked it pauses the “auto play” so the large picture can be viewed without it chaning after the pause delay. Simply press “play” from the toolbar again to start it off again…
I was wondering how to make thumbnail container fade out automatically after for example 5 seconds?
i know this the part for fade in and out thumbnail but how to add code like i said before.
For help I would be highly appreciate:)
$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity); $thumbnails_wrapper.hover( function(){ //mouse over var $this=$(this); $this.stop().fadeTo("slow", 1); }, function(){ //mouse out var $this=$(this); $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity); } );I know this question is a bit older, but this little code snippet might help somebody concerning the same issue. Just paste it into your javascript code:
// FADE OUT THUMBNAIL SCROLLER AT START setTimeout(function() { $("#thumbnails_wrapper").stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity); }, 5000);Change the number at the end(5000=5 seconds) to your preferred fade out time.
Hope this helps.
Once more. When I (in maximized window) quicky move with mouse totally to left side on thumbs, scrolling is stopped (not on first thumbnail) . On the right side it works ok. Sorry for my English, please. Thanks.
Hi! I have a very important question. I’m designing a portfolio site using this code. Is there anyway to load seperate galleries from the menu? I’ve managed to replace the thumbnails with 2 links, one called gallery 1 and one gallery 2 (the customer doesn’t want thumbnail images, just links that load the big pictures and from there clicking to next and previous images). Gallery 1 should load the large fullscreen images from the folder “img/gallery1″ and Gallery 2 should load from “img/gallery2″. That works, but once the large images are loaded, Gallery2 continues after the last image in the gallery2 folder to the gallery1 folder. How I can have only images shown in each folder and not all folders???
Nevermind!!! Got it to work, just removed all if last/first codes and works like a charm now with seperate galleries!
Dear Steve,
What you achieved is exactly what I was looking for mine and my friends galleries.
It would be great if you could share with me the source script with the solution showing the way you made it work, the way you said…
Instead of “Thumb Slideshow Images” > “Image Links” leading to Separate Galleries, that load to Full Screen after clicking…
Thanks in advance,
Nina.
Great gallery! Is it possible to make the Hover function of the thumbnails stay lit after clicking? I would like to highlight the thumbnail that is currently being displayed. Such as, on opening the site, the first thumbnail would have a 100% opacity. Click next, and the second thumbnail would have 100% opacity, while the first thumbnail returns to the dim state. Has anyone else been able to accomplish this effect?
Thanks!
Hello
I know that this message is a little old but did you fixed the thumbnails stay lit after clicking ?
If yes, i’m very interested because i need it too for my website.
Thanks you for the answer
Try a onclick/click function combined with addClass/removeClass function and modify your stylesheet through setting up two classes(lit/non-lit) using different opacity for each of them.
You can even use/modify the given functions for the mouseover/mouseout events.
Sorry for not posting any code snippet, but I believe you figure that out and learn something new about using Jquery.
this is great, well done, love it!
I really want it to work on iPad, so is there a way to stop the thumbnails moving on hover so that they become static, visible at all times, and allow the user to scroll horizontally (manually)?
Or having thumbnail scroll buttons would be good.
Cheers,
@Christian Carlson and @Keeby
Until I update the gallery, I can only provide you with a link from another user that has done it so you can see his implementation:
http://pritesh.info/vivid-photo-2/richard/
Cheers very much man!
I followed the link but the page appears to function the same with thumbnails moving on hover.
I’ll play around with the code and see if I can figure something out.
Hi
Sweet code! I have 1 issue however with the scroll action, if I move the mouse out of the container and re-enter at another point it calculates a move, which scrolls the intended image away. Does anyone have a way around this?
The ‘problem’ is in the way the following works:
$thumbScroller.mousemove(function(e){
….
});
thx!
This is a great gallery, would it be possible to incorporate a HTML5 fullscreen option. like pressing F11. Then it would be awesome.
AWESOME – WOW