jQuery Gallery

jQuery Gallery

Hi all,

Firstly I hope this is the right forum; if not, please redirect me!

I've recently started using a template for my photography portfolio that uses jQuery for the gallery. I have no jQuery knowledge, and the gallery is working fine, apart from one thing I'd like to change.

I'd like the gallery to change image every x number of seconds (i.e. a slideshow). I've had a look around and I can't find anywhere that really helps with that, so I'm hoping someone here would be kind enough to assist me.

I would attach the script but apparently I'm not allowed, so I'll put it below:

  1. //config
  2. //set default images view mode
  3. $defaultViewMode="full"; //full, normal, original
  4. $tsMargin=30; //first and last thumbnail margin (for better cursor interaction) 
  5. $scrollEasing=600; //scroll easing amount (0 for no easing) 
  6. $scrollEasingType="easeOutCirc"; //scroll easing type 
  7. $thumbnailsContainerOpacity=0.8; //thumbnails area default opacity
  8. $thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out
  9. $thumbnailsOpacity=0.6; //thumbnails default opacity
  10. $nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")
  11. $keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")

  13. //cache vars
  14. $thumbnails_wrapper=$("#thumbnails_wrapper");
  15. $outer_container=$("#outer_container");
  16. $thumbScroller=$(".thumbScroller");
  17. $thumbScroller_container=$(".thumbScroller .container");
  18. $thumbScroller_content=$(".thumbScroller .content");
  19. $thumbScroller_thumb=$(".thumbScroller .thumb");
  20. $preloader=$("#preloader");
  21. $toolbar=$("#toolbar");
  22. $toolbar_a=$("#toolbar a");
  23. $bgimg=$("#bgimg");
  24. $img_title=$("#img_title");
  25. $nextImageBtn=$(".nextImageBtn");
  26. $prevImageBtn=$(".prevImageBtn");

  28. $(window).load(function() {
  29.     $toolbar.data("imageViewMode",$defaultViewMode); //default view mode
  30.     if($defaultViewMode=="full"){
  31.          $toolbar_a.html("<img src='images/toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
  32.     } else {
  33.          $toolbar_a.html("<img src='images/toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
  34.     }
  35.     ShowHideNextPrev($nextPrevBtnsInitState);
  36.     //thumbnail scroller
  37.     $thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin
  38.     sliderLeft=$thumbScroller_container.position().left;
  39.     sliderWidth=$outer_container.width();
  40.     $thumbScroller.css("width",sliderWidth);
  41.     var totalContent=0;
  42.     fadeSpeed=200;
  43.     
  44.     var $the_outer_container=document.getElementById("outer_container");
  45.     var $placement=findPos($the_outer_container);
  46.     
  47.     $thumbScroller_content.each(function () {
  48.         var $this=$(this);
  49.         totalContent+=$this.innerWidth();
  50.         $thumbScroller_container.css("width",totalContent);
  51.         $this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
  52.     });

  54.     $thumbScroller.mousemove(function(e){
  55.         if($thumbScroller_container.width()>sliderWidth){
  56.               var mouseCoords=(e.pageX - $placement[1]);
  57.               var mousePercentX=mouseCoords/sliderWidth;
  58.               var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
  59.               var thePosA=mouseCoords-destX;
  60.               var thePosB=destX-mouseCoords;
  61.               if(mouseCoords>destX){
  62.                   $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
  63.               } else if(mouseCoords<destX){
  64.                   $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
  65.               } else {
  66.                 $thumbScroller_container.stop();  
  67.               }
  68.         }
  69.     });

  71.     $thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
  72.     $thumbnails_wrapper.hover(
  73.         function(){ //mouse over
  74.             var $this=$(this);
  75.             $this.stop().fadeTo("slow", 1);
  76.         },
  77.         function(){ //mouse out
  78.             var $this=$(this);
  79.             $this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
  80.         }
  81.     );

  83.     $thumbScroller_thumb.hover(
  84.         function(){ //mouse over
  85.             var $this=$(this);
  86.             $this.stop().fadeTo(fadeSpeed, 1);
  87.         },
  88.         function(){ //mouse out
  89.             var $this=$(this);
  90.             $this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
  91.         }
  92.     );

  94.     //on window resize scale image and reset thumbnail scroller
  95.     $(window).resize(function() {
  96.         FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));
  97.         $thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc"); 
  98.         var newWidth=$outer_container.width();
  99.         $thumbScroller.css("width",newWidth);
  100.         sliderWidth=newWidth;
  101.         $placement=findPos($the_outer_container);
  102.     });

  104.     //load 1st image
  105.     var the1stImg = new Image();
  106.     the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
  107.     the1stImg.src = $bgimg.attr("src");
  108.     $outer_container.data("nextImage",$(".content").first().next().find("a").attr("href"));
  109.     $outer_container.data("prevImage",$(".content").last().find("a").attr("href"));
  110. });

  112. function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
  113.     $this.fadeOut("fast",function(){
  114.         $this.attr("src", "").attr("src", imgSrc); //change image source
  115.         FullScreenBackground($this,imageWidth,imageHeight); //scale background image
  116.         $preloader.fadeOut("fast",function(){$this.fadeIn("slow");});
  117.         var imageTitle=$img_title.data("imageTitle");
  118.         if(imageTitle){
  119.             $this.attr("alt", imageTitle).attr("title", imageTitle);
  120.             $img_title.fadeOut("fast",function(){
  121.                 $img_title.html(imageTitle).fadeIn();
  122.             });
  123.         } else {
  124.             $img_title.fadeOut("fast",function(){
  125.                 $img_title.html($this.attr("title")).fadeIn();
  126.             });
  127.         }
  128.     });
  129. }

  131. //mouseover toolbar
  132. if($toolbar.css("display")!="none"){
  133.     $toolbar.fadeTo("fast", 0.4);
  134. }
  135. $toolbar.hover(
  136.     function(){ //mouse over
  137.         var $this=$(this);
  138.         $this.stop().fadeTo("fast", 1);
  139.     },
  140.     function(){ //mouse out
  141.         var $this=$(this);
  142.         $this.stop().fadeTo("fast", 0.4);
  143.     }
  144. );

  146. //Clicking on thumbnail changes the background image
  147. $("#outer_container a").click(function(event){
  148.     event.preventDefault();
  149.     var $this=$(this);
  150.     GetNextPrevImages($this);
  151.     GetImageTitle($this);
  152.     SwitchImage(this);
  153.     ShowHideNextPrev("show");
  154. }); 

  156. //next/prev images buttons
  157. $nextImageBtn.click(function(event){
  158.     event.preventDefault();
  159.     SwitchImage($outer_container.data("nextImage"));
  160.     var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
  161.     GetNextPrevImages($this);
  162.     GetImageTitle($this);
  163. });

  165. $prevImageBtn.click(function(event){
  166.     event.preventDefault();
  167.     SwitchImage($outer_container.data("prevImage"));
  168.     var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
  169.     GetNextPrevImages($this);
  170.     GetImageTitle($this);
  171. });

  173. //next/prev images keyboard arrows
  174. if($keyboardNavigation=="on"){
  175. $(document).keydown(function(ev) {
  176.     if(ev.keyCode == 39) { //right arrow
  177.         SwitchImage($outer_container.data("nextImage"));
  178.         var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
  179.         GetNextPrevImages($this);
  180.         GetImageTitle($this);
  181.         return false; // don't execute the default action (scrolling or whatever)
  182.     } else if(ev.keyCode == 37) { //left arrow
  183.         SwitchImage($outer_container.data("prevImage"));
  184.         var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
  185.         GetNextPrevImages($this);
  186.         GetImageTitle($this);
  187.         return false; // don't execute the default action (scrolling or whatever)
  188.     }
  189. });
  190. }

  192. function ShowHideNextPrev(state){
  193.     if(state=="hide"){
  194.         $nextImageBtn.fadeOut();
  195.         $prevImageBtn.fadeOut();
  196.     } else {
  197.         $nextImageBtn.fadeIn();
  198.         $prevImageBtn.fadeIn();
  199.     }
  200. }

  202. //get image title
  203. function GetImageTitle(elem){
  204.     var title_attr=elem.children("img").attr("title"); //get image title attribute
  205.     $img_title.data("imageTitle", title_attr); //store image title
  206. }

  208. //get next/prev images
  209. function GetNextPrevImages(curr){
  210.     var nextImage=curr.parents(".content").next().find("a").attr("href");
  211.     if(nextImage==null){ //if last image, next is first
  212.         var nextImage=$(".content").first().find("a").attr("href");
  213.     }
  214.     $outer_container.data("nextImage",nextImage);
  215.     var prevImage=curr.parents(".content").prev().find("a").attr("href");
  216.     if(prevImage==null){ //if first image, previous is last
  217.         var prevImage=$(".content").last().find("a").attr("href");
  218.     }
  219.     $outer_container.data("prevImage",prevImage);
  220. }

  222. //switch image
  223. function SwitchImage(img){
  224.     $preloader.fadeIn("fast"); //show preloader
  225.     var theNewImg = new Image();
  226.     theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
  227.     theNewImg.src = img;
  228. }

  230. //get new image dimensions
  231. function CreateDelegate(contextObject, delegateMethod){
  232.     return function(){
  233.         return delegateMethod.apply(contextObject, arguments);
  234.     }
  235. }

  237. //new image on load
  238. function theNewImg_onload(){
  239.     $bgimg.data("newImageW",this.width).data("newImageH",this.height);
  240.     BackgroundLoad($bgimg,this.width,this.height,this.src);
  241. }

  243. //Image scale function
  244. function FullScreenBackground(theItem,imageWidth,imageHeight){
  245.     var winWidth=$(window).width();
  246.     var winHeight=$(window).height();
  247.     if($toolbar.data("imageViewMode")!="original"){ //scale
  248.         var picHeight = imageHeight / imageWidth;
  249.         var picWidth = imageWidth / imageHeight;
  250.         if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
  251.             if ((winHeight / winWidth) < picHeight) {
  252.                 $(theItem).attr("width",winWidth);
  253.                 $(theItem).attr("height",picHeight*winWidth);
  254.             } else {
  255.                 $(theItem).attr("height",winHeight);
  256.                 $(theItem).attr("width",picWidth*winHeight);
  257.             };
  258.         } else { //normal size image mode
  259.             if ((winHeight / winWidth) > picHeight) {
  260.                 $(theItem).attr("width",winWidth);
  261.                 $(theItem).attr("height",picHeight*winWidth);
  262.             } else {
  263.                 $(theItem).attr("height",winHeight);
  264.                 $(theItem).attr("width",picWidth*winHeight);
  265.             };
  266.         }
  267.         $(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
  268.         $(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
  269.     } else { //no scale
  270.         $(theItem).attr("width",imageWidth);
  271.         $(theItem).attr("height",imageHeight);
  272.         $(theItem).css("margin-left",(winWidth-imageWidth)/2);
  273.         $(theItem).css("margin-top",(winHeight-imageHeight)/2);
  274.     }
  275. }

  277. //Image view mode function - fullscreen or normal size
  278. function ImageViewMode(theMode){
  279.     $toolbar.data("imageViewMode", theMode);
  280.     FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));
  281.     if(theMode=="full"){
  282.          $toolbar_a.html("<img src='images/toolbar_n_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
  283.     } else {
  284.          $toolbar_a.html("<img src='images/toolbar_fs_icon.png' width='50' height='50'  />").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
  285.     }
  286. }

  288. //function to find element Position
  289.     function findPos(obj) {
  290.         var curleft = curtop = 0;
  291.         if (obj.offsetParent) {
  292.             curleft = obj.offsetLeft
  293.             curtop = obj.offsetTop
  294.             while (obj = obj.offsetParent) {
  295.                 curleft += obj.offsetLeft
  296.                 curtop += obj.offsetTop
  297.             }
  298.         }
  299.         return [curtop, curleft];
  300.     }
I'm sorry for the list, I did try to find a "spoiler" type tag, but you don't appear to have one, so I can't hide it.

Anyway, thanks for any help and apologies if this isn't the right forum and so forth.


Kind regards,
Will.

PS. You can see my site here if it helps (be kind).