web design

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


322 Comments

Post a comment

Comments pages: 1 2

  1. mauricio
    Posted on May 29, 2014 at 00:18 Permalink

    GREAT CODE! , one question, it’s possible center thumbs, my gallery it’s only 3 photos, thks!!!

    Reply
  2. shaikhshabaz
    Posted on May 27, 2014 at 12:08 Permalink

    PLz guide me how to coneect this template contact form directly to the specified email address……

    Reply
  3. shaikhshabaz
    Posted on May 27, 2014 at 12:05 Permalink

    Hello ,plzzzz help me out .I had used yor Excellent Template for my client .but as if not I cannot able to connect Contact Form Directly to Email,Outlook is opening..Plz help me out..

    Reply
  4. Prasanth
    Posted on April 10, 2014 at 12:41 Permalink

    Thank You Very Mush keep going……………………

    Reply
  5. Mr. Hogarth
    Posted on March 12, 2014 at 11:32 Permalink

    This is an awesome blog post, this image slider looks just awesome that I created and put on my site.

    Reply
  6. miha
    Posted on February 19, 2014 at 00:29 Permalink

    It would be nice if you can have a link to every image in the gallery, because there is only a link to the gallery, but a link to single images would be nice.
    it would be also great it there was a possibility to have different gallery categories

    Reply
  7. Zorrek
    Posted on February 13, 2014 at 10:37 Permalink

    This is NOT fullscreen like I hoped! It’s merely full window. Dissapointing!

    Reply
  8. Zahid Hasan
    Posted on February 6, 2014 at 18:24 Permalink

    How do I hide the thumbnail completely? Remove it from the entire slider altogether?

    Reply
    • Zahid Hasan
      Posted on February 6, 2014 at 18:28 Permalink

      Also, is there anyway to enable Autoplay within the script?

      Reply
  9. Peter
    Posted on October 23, 2013 at 13:55 Permalink

    Is there any way to check if an image comes in vertical format and then bypass the image scaling block so such images will be displayed fully (not scaled)?

    Thanks for your reply!

    Reply
  10. darkfalco
    Posted on October 14, 2013 at 04:34 Permalink

    Hello Malihu, first of all, thanks.
    I mixed version 1 and version 2, but I’m having an issue with the “bgimg” display tag, when I load the website or click a thumbnail, the style gets to “display:none;”. Is there a way to fix this within the “gallery.js”?

    Thanks in advance.

    Reply
    • darkfalco
      Posted on October 15, 2013 at 01:27 Permalink

      I did a workaround just set the background style as !important on the CSS file…

      At the moment I’m having issues with:
      When an image is clicked it doesn’t fade in or fade out, just quick change.

      Where in the code can I check this, thanks.

      Reply
  11. Lem
    Posted on September 28, 2013 at 15:44 Permalink

    Hi
    Is there any way changing the size of the thumbnails??
    Thanks

    Reply
  12. Khush
    Posted on September 20, 2013 at 17:08 Permalink

    Hi there, great work on this gallery. The only thing I find that would make this really perfect is the ability to sort the images. Right now I find that they are displayed based on file name and not based on the order in which they were added. Is it possible to make the images display in the order that that they were uploaded? ie the latest images show first and the older ones display later? Thanks in advance.

    Reply
  13. T
    Posted on August 21, 2013 at 02:35 Permalink

    I have tried to create a separate JS sheet for this great design – but i cannot separate the code from the html page and keep it functional. Wanted to use in multiple pages with one js sheet download for efficiency. Can the js code be done in a separate .js sheet? And yes I have deleted the in my attempts – nothing but js code on the page. In my attempts – the scroll bar appears but not the background image.

    Can anyone help?

    Thank You

    Reply
    • Jaime
      Posted on September 16, 2013 at 01:41 Permalink

      T:
      Put the call to the .js file at the end of the page, before the ending body tag

      Reply
      • T
        Posted on November 3, 2013 at 18:21 Permalink

        Tried it – could not get it to work – have you tried this? If yes, and it works let me know I will happily retry.
        on page script is the only way I could get it to function

        Thanks

        Reply
  14. Chris
    Posted on July 24, 2013 at 23:54 Permalink

    Thank you for your great work!

    I modified the code so I could have the large image link to a specific page based on a custom attribute added to the thumbnail image (attr = data-link).

    Here’s the updated JQuery code if someone is interested:
    http://pastebin.com/nyLTu07y

    The only things that would need to change in the HTML example is you would have to wrap the large image in the #bg div in an <a href="" class="parent-link"> tag and then add a data-link attribute with your URL to the thumbnail image like <img src="your-thumbnail.jpg" alt="alt" title="title" data-link="link-to-your-page.html">

    Reply
  15. Tomas
    Posted on July 17, 2013 at 00:34 Permalink

    Hi Malihu

    AWESOME Gallery!

    Is it possible to have more than one gallery on the same site… is there a good solution for this… ?

    Cheers, T

    Reply
  16. Hugo
    Posted on May 28, 2013 at 03:26 Permalink

    Is it posible to obtain the images path from a sql database?

    Reply
    • Hugo
      Posted on May 30, 2013 at 19:58 Permalink

      I already resolve how to get the path from my database and use it in the img, when I click on the next button change to the next picture, when I get to the last picture and click next it show me the first picture but when you click next again show the first again and again.

      Reply
      • Hugo
        Posted on May 30, 2013 at 20:14 Permalink

        I’m sorry but I forgot to include part of the code
        <div class="content"> <div><a href= <%= photo1 %> ><img src=<%=Session("Foto1")%> title="David Auto Sales" alt="" class="thumb" /></a></div> </div> <div class="content"> <div><a href= <%= photo2 %>><img src= <%= photo2 %> title="David Auto Sales" alt="" class="thumb" /></a></div> </div>

        Reply
  17. Daniel
    Posted on April 22, 2013 at 20:28 Permalink

    AMAZING THANK YOU

    Reply
  18. Without believes
    Posted on April 18, 2013 at 00:46 Permalink

    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

    Reply
    • malihu
      Posted on April 18, 2013 at 00:48 Permalink

      You can set the $defaultViewMode to “normal” or “original” in the first line of the script.

      Reply
      • Without Believes
        Posted on May 2, 2013 at 07:59 Permalink

        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).

        Reply
  19. Natalia
    Posted on March 3, 2013 at 12:04 Permalink

    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!

    Reply
  20. Max
    Posted on February 17, 2013 at 16:15 Permalink

    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!

    Reply
  21. Mila
    Posted on February 16, 2013 at 22:37 Permalink

    *I cannot scroll the images in the gallery – this is what i meant above. Thanks.

    Reply
  22. Mila
    Posted on February 16, 2013 at 22:36 Permalink

    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!

    Reply
  23. Cory
    Posted on February 15, 2013 at 12:07 Permalink

    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.

    Reply
  24. Marco
    Posted on February 11, 2013 at 13:00 Permalink

    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.

    Reply
  25. Melo
    Posted on January 18, 2013 at 00:14 Permalink

    As you may have already heard from others. Thanks! Your work is much appreciated. I’m looking forward to your Ver. 2 :-)

    Reply
  26. Eva
    Posted on January 13, 2013 at 18:28 Permalink

    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!

    Reply
  27. sergey
    Posted on December 17, 2012 at 04:48 Permalink

    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.

    Reply
  28. Anthony
    Posted on December 13, 2012 at 21:53 Permalink

    Is it possible to put this on a website but still keep your nav bar at the top?

    Reply
    • malihu
      Posted on December 13, 2012 at 22:53 Permalink

      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.

      Reply
      • Anthony
        Posted on December 14, 2012 at 04:22 Permalink

        Oh, that is great! Thank you so much.

        Reply
  29. Mauro
    Posted on November 30, 2012 at 17:52 Permalink

    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

    Reply
  30. Ron Crockett
    Posted on November 26, 2012 at 20:19 Permalink

    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

    Reply
    • malihu
      Posted on November 27, 2012 at 15:13 Permalink

      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…

      Reply
      • Ron Crockett
        Posted on November 28, 2012 at 09:20 Permalink

        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

        Reply
        • Ron Crockett
          Posted on November 28, 2012 at 20:35 Permalink

          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

          Reply
          • malihu
            Posted on November 29, 2012 at 11:59 Permalink

            Hi Ron,
            Sent me an e-mail with the details.

  31. Mauro
    Posted on November 21, 2012 at 13:18 Permalink

    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 !!!

    Reply
    • malihu
      Posted on November 21, 2012 at 15:42 Permalink

      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.

      Reply
      • Mauro
        Posted on November 21, 2012 at 16:40 Permalink

        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 .

        Reply
  32. Michael
    Posted on November 15, 2012 at 16:04 Permalink

    Is there a way to slow down thumbnails scrolling? If there are many scrolling is wayyy to fast:)

    Reply
    • Melo
      Posted on January 18, 2013 at 00:08 Permalink

      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)

      Reply
  33. Al
    Posted on November 10, 2012 at 20:50 Permalink

    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.

    Reply
  34. andy.emm
    Posted on October 18, 2012 at 02:27 Permalink

    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');

    Reply
    • andy.emm
      Posted on October 22, 2012 at 07:35 Permalink

      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!

      Reply
  35. Jessica
    Posted on October 11, 2012 at 00:11 Permalink

    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!

    Reply
  36. Ngaa
    Posted on October 5, 2012 at 18:52 Permalink

    hello malihu,

    amazing work …:)

    How could i put a link in the background image?

    thx for help

    Reply
  37. Ngaa
    Posted on October 5, 2012 at 05:38 Permalink

    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

    Reply
  38. Lovepreet
    Posted on September 17, 2012 at 16:19 Permalink

    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

    Reply
  39. GehanR
    Posted on September 14, 2012 at 08:28 Permalink

    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

    Reply
    • malihu
      Posted on September 14, 2012 at 21:15 Permalink

      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 :)

      Reply
      • d@niel keeney
        Posted on October 1, 2012 at 23:00 Permalink

        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.

        Reply
        • malihu
          Posted on October 1, 2012 at 23:34 Permalink

          Thanks a lot for your donation and more importantly, for your kind comments :) I really appreciate your support.

          Reply
  40. Ricardo
    Posted on September 12, 2012 at 02:14 Permalink

    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

    Reply
  41. Majed
    Posted on September 10, 2012 at 15:14 Permalink

    Nice Works dude, is there an autoplay option for it?

    Reply
  42. keanneboi
    Posted on September 9, 2012 at 13:59 Permalink

    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

    Reply
  43. bart
    Posted on September 2, 2012 at 13:10 Permalink

    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

    Reply
  44. Heather
    Posted on August 27, 2012 at 04:33 Permalink

    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

    Reply
  45. vipul
    Posted on August 22, 2012 at 13:17 Permalink

    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.

    Reply
  46. Carsten
    Posted on August 22, 2012 at 00:36 Permalink

    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 :-D

    Reply
  47. Jeferson
    Posted on August 21, 2012 at 04:59 Permalink

    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!!!

    Reply
    • malihu
      Posted on August 21, 2012 at 13:21 Permalink

      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 :)

      Reply
  48. joanna
    Posted on August 15, 2012 at 08:46 Permalink

    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?

    Reply
    • malihu
      Posted on August 15, 2012 at 14:50 Permalink

      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.

      Reply
      • Dragos N.
        Posted on May 29, 2013 at 10:14 Permalink

        I would like to see this feature ..
        also if u can add + scroll and when user will press the button Esc – gallery to close

        Reply
  49. Richard
    Posted on August 10, 2012 at 16:15 Permalink

    Hi, works a treat apart from ipad?

    Anyone have a fix?

    Thanks.

    Reply
  50. CW
    Posted on August 7, 2012 at 00:49 Permalink

    Is there any easy way to get the images to change every x amount of seconds?

    Reply
    • malihu
      Posted on August 7, 2012 at 01:18 Permalink

      Not at the moment. I’ll include such feature on a future update.

      Reply
    • LX
      Posted on November 14, 2012 at 18:03 Permalink

      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 GALLERY

      I 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.preventDefault in 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.

      Reply
      • malihu
        Posted on November 14, 2012 at 18:09 Permalink

        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!

        Reply
        • LX
          Posted on November 14, 2012 at 19:27 Permalink

          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

          Reply
      • Rico
        Posted on December 19, 2012 at 12:33 Permalink

        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!

        Reply
      • elena s
        Posted on July 16, 2013 at 15:38 Permalink

        thank you veeeeery much you are great!
        you just save my life with that adding! <3

        malihu, thanks to you too, OF COURSE!

        Reply
  51. Jon
    Posted on July 29, 2012 at 20:02 Permalink

    The ajax.googleapis/ajax/libs… script is causing me problems

    <!-- //Javascript code goes here for now $(function() { $( "#tabs" ).tabs(); }); -->

    Reply
  52. Jon
    Posted on July 29, 2012 at 19:59 Permalink

    This script tag seems to be the culprit of might site breaking.

    Reply
  53. Jon
    Posted on July 29, 2012 at 19:11 Permalink

    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;
    }

    Reply
  54. xarkan
    Posted on July 25, 2012 at 03:51 Permalink

    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

    Reply
  55. Ashel
    Posted on July 19, 2012 at 06:44 Permalink

    Awesome!!!

    Reply
  56. Cbas
    Posted on June 30, 2012 at 23:51 Permalink

    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.

    Reply
  57. Iwan
    Posted on June 27, 2012 at 01:38 Permalink

    Great Script you wrote man!!
    Is it possible to use vimeo urls or iframes?
    I hope so :)

    Best

    Reply
  58. jvdjay
    Posted on June 22, 2012 at 02:14 Permalink

    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

    Reply
  59. Marzia
    Posted on June 20, 2012 at 17:49 Permalink

    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

    Reply
    • Marzia
      Posted on July 3, 2012 at 12:30 Permalink

      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.

      Reply
      • malihu
        Posted on July 3, 2012 at 14:40 Permalink

        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.

        Reply
        • Marzia
          Posted on July 9, 2012 at 11:01 Permalink

          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

          Reply
  60. sebastian
    Posted on June 11, 2012 at 07:33 Permalink

    Tutorial is excellent, thanks a lot.. Can i add “auto play” options too?
    Could anybody please explain how can i add “auto play” function??

    Reply
    • Big Chris
      Posted on December 19, 2012 at 11:14 Permalink

      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 a click 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…

      Reply
  61. Szymon
    Posted on June 6, 2012 at 21:11 Permalink

    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); } );

    Reply
    • LX
      Posted on November 14, 2012 at 17:25 Permalink

      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.

      Reply
  62. Tonda
    Posted on June 1, 2012 at 23:35 Permalink

    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.

    Reply
  63. steve
    Posted on May 23, 2012 at 09:37 Permalink

    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???

    Reply
    • steve
      Posted on May 23, 2012 at 14:04 Permalink

      Nevermind!!! Got it to work, just removed all if last/first codes and works like a charm now with seperate galleries!

      Reply
      • Nina
        Posted on June 11, 2012 at 19:31 Permalink

        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.

        Reply
  64. Shan
    Posted on May 15, 2012 at 22:58 Permalink

    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!

    Reply
    • René
      Posted on September 29, 2012 at 23:00 Permalink

      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 :)

      Reply
      • LX
        Posted on November 14, 2012 at 17:37 Permalink

        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.

        Reply
  65. Keeby
    Posted on May 15, 2012 at 17:07 Permalink

    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,

    Reply
    • malihu
      Posted on May 15, 2012 at 19:24 Permalink

      @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/

      Reply
      • Keeby
        Posted on May 17, 2012 at 10:11 Permalink

        Cheers very much man!

        Reply
      • Keeby
        Posted on May 17, 2012 at 10:15 Permalink

        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.

        Reply
  66. Dafa
    Posted on April 29, 2012 at 05:43 Permalink

    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!

    Reply
  67. Vern
    Posted on April 28, 2012 at 22:24 Permalink

    This is a great gallery, would it be possible to incorporate a HTML5 fullscreen option. like pressing F11. Then it would be awesome.

    Reply
  68. Ingo
    Posted on April 27, 2012 at 19:21 Permalink

    AWESOME – WOW

    Reply

Comments pages: 1 2


Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>

css.php