jQuery + prev/next links

Image 01

Description Image 01

Setup 03 - jQuery for transition effects + prev/next-links

1. create a new &pictureTpl-chunk

like in the previous version, almost everything stays the same besides the &pictureTpl-chunk (mgPicture03) and the number added to the chunk-name (03), which will look like:

<p id="maxTitle">[+maxigallery.picture.title:htmlent+]</p><br /><p id="maxDescr">[+maxigallery.picture.descr:htmlent+]</p><br /><div id="picturecontainer"><br /><img id="maxImage" src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" alt="[+maxigallery.picture.title:htmlent+]" /></div><br /><div id="prevnext"><a href="javascript:prevPic();">prev picture</a>  || <a href="javascript:nextPic();">next picture</a></div>

this chunk has an additional div which contains the prev/next-links + the necessary javascript to activate the prev/next funcion. You don't need to put this div in the pictureTpl chunk, you could put it wherever you want in your template...

2. the Javascript

it's the same javascript like in version 02 + the prev/next function, so create a javascript-file, name it "js-setup03.js" with the following content:

var jq = jQuery.noConflict();<br />jq(document).ready(function(){<br />   jq(".hoverthumb").hover(function(){<br />   jq(this).fadeTo("fast", 0.6); // This sets the opacity to 60% on hover<br />   },function(){<br />   jq(this).fadeTo("fast", 1.0); // This sets the opacity back to 100% on mouseout<br />   jq("div.hoverthumb").click(function() {<br />   jq('.aktiv').removeClass('aktiv');<br />   jq(this).addClass('aktiv');<br />});<br />});<br />});<br />function showPic(url,title,descr,width,height) {<br />  jq("#maxImage").fadeOut("slow", function(){<br />      var image = new Image();<br />      jq(image).load(function() {<br />        jq(this).hide();<br />      // with the holding div #loader, apply:<br />      jq('#picturecontainer')<br />        // remove the loading class (so no background spinner), <br />        .removeClass('loading')<br />        // then insert our image<br />        .append(this);<br />        jq("#maxImage").attr({<br />          src: url,<br />          width: width,<br />          height: height<br />        });<br />        jq("#maxImage").fadeIn("fast");<br />        jq("#maxTitle").html(title);<br />        jq("#maxDescr").html(descr);<br />   jq('#picturecontainer').addClass('loading')<br />      });<br />      jq(image).attr({src: url, width: width, height: height});<br />  });<br />}<br /><br />function nextPic() {<br />  // collect thumbnail links<br />  var thumbLinks = jq('.thumbnail').parent();<br />  // get url parts from current image<br />  var currentUrlParts = jq('#maxImage').attr('src').split("/");<br />  // get current filename<br />  var filename = currentUrlParts[currentUrlParts.length-1];<br />  // variable to store the "found current thumbnail" flag<br />  var found = false;<br />  // go through thumbnails<br />  for (i=0; i < thumbLinks.length; i++) {<br />    var href = thumbLinks[i].href;<br />    // if current thumbnail has been found, we are processing the next thumbnail, execute the showPic<br />    if (found) {<br />      jq(thumbLinks[i]).parent().addClass('aktiv');<br />      // collect only the showPic parameters from href contents<br />      var strip = href.substring(href.indexOf("'"), href.length-1);<br />      // remove single quotes from the parameters<br />      strip = strip.replace(/\'/g,"");<br />      // fix encoded spaces<br />      strip = strip.replace(/\%20/g," ");<br />      // split the params to an array<br />      var params = strip.split(',');<br />      // call the showPic function<br />      showPic(params[0],params[1],params[2],params[3],params[4],params[5]);<br />      return;<br />    } else {<br />      // if this is the current thumbnail, raise the found flag<br />      if(href.indexOf(filename) >= 0) {<br />         found = true;<br />        // if we are not in last thumbnail<br />        if (i+1 < thumbLinks.length) {<br />          jq(thumbLinks[i]).parent().removeClass('aktiv');<br />        }<br />      } <br />    }<br />  }<br />}<br />function prevPic() {<br />  // collect thumbnail links<br />  var thumbLinks = jq('.thumbnail').parent();<br />  // get url parts from current image<br />  var currentUrlParts = jq('#maxImage').attr('src').split("/");<br />  // get current filename<br />  var filename = currentUrlParts[currentUrlParts.length-1];<br />  // variable to store the "found current thumbnail" flag<br />  var found = false;<br />  // variable to store previous href<br />  var prevHref = "";<br />  // go through thumbnails<br />  for (i=0; i < thumbLinks.length; i++) {<br />    var href = thumbLinks[i].href;<br />    // if this is the current thumbnail, change picture to previous<br />    if(href.indexOf(filename) >= 0) {<br />      if (i==0) {<br />        return; //we are in first picture<br />      }<br />      jq(thumbLinks[i]).parent().removeClass('aktiv');<br />      jq(thumbLinks[i-1]).parent().addClass('aktiv');<br />       // collect only the showPic parameters from href contents<br />      var strip = prevHref.substring(prevHref.indexOf("'"), prevHref.length-1);<br />      // remove single quotes from the parameters<br />      strip = strip.replace(/\'/g,"");<br />      // fix encoded spaces<br />      strip = strip.replace(/\%20/g," ");<br />      // split the params to an array<br />      var params = strip.split(',');<br />      // call the showPic function<br />      showPic(params[0],params[1],params[2],params[3],params[4],params[5]);<br />      return;<br />    } else {<br />      // else set this href to be the previous href<br />      var prevHref = href;<br />    }<br />  }<br />}

3. calling MaxiGallery

[!MaxiGallery? &pictureTpl=`mgPicture03` &display=`pictureview` <br />&js=`assets/..path to your javascript-file.../js-setup03.js` &max_pic_size=`420x320` &max_thumb_size=`60x45`!]

and

[!MaxiGallery? &galleryOuterTpl=`mgGalleryOuter03` &galleryPictureTpl=`mgGalleryPicture03` &manage_target=`2`!]

..this should hopefully result in a gallery shown above...

next step will be a version that has a lightbox-link to a BigImage ->