MODx | MG Setup-02

Setup 02 - jQuery for transition effects

1. referencing jQuery

since this Version is using jQuery, we need to reference the jQuery library in the head part of our template, call it like this:

<script type="text/javascript" src="assets/...path to your jQuery file.../jquery-1.3.2.min.js"></script>

you can download it here.

2. Our chunks for this version

the content of "mgGalleryOuter02" will be the same as for version 01, i just name it "02", you can name it whatever you want ;) ...the same for "mgPicture02" & "mgGalleryPicture02"

the javascript-file will look a bit different though, content of "js-setup02.js" will be:

var jq = jQuery.noConflict();
jq(document).ready(function(){
   jq(".hoverthumb").hover(function(){
   jq(this).fadeTo("fast", 0.6); // This sets the opacity to 60% on hover
   },function(){
   jq(this).fadeTo("fast", 1.0); // This sets the opacity back to 100% on mouseout
   jq("div.hoverthumb").click(function() {
   jq('.aktiv').removeClass('aktiv');
   jq(this).addClass('aktiv');
});
});
});
function showPic(url,title,descr,width,height) {
  jq("#maxImage").fadeOut("slow", function(){
      var image = new Image();
      jq(image).load(function() {
        jq(this).hide();
// with the holding div #loader, apply:
      jq('#picturecontainer')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);
        jq("#maxImage").attr({
          src: url,
          width: width,
          height: height
        });
        jq("#maxImage").fadeIn("fast");
        jq("#maxTitle").html(title);
        jq("#maxDescr").html(descr);
   jq('#picturecontainer').addClass('loading')
      });
      jq(image).attr({src: url, width: width, height: height});
  });
}

since we call jQuery is called in noconflict-mode it should work with other js-libraries (quickedit), but this might depend on the order the files are being called. If you take a look at the code, you see comments that point out where you could possibly change the code to have a different opacity for the hover-state of the thumbnails. Also check the code for these parts "fadeIn("fast")" & "fadeIn("slow")", changing these will regulate the speed the image fades in or out.

3. calling MaxiGallery

now we call MaxiGallery in our template like we did for version 01, only change are the template names (02) and the javascript-file:

[!MaxiGallery? &pictureTpl=`mgPicture02` &display=`pictureview` 
&max_pic_size=`420x320` &max_thumb_size=`60x45` &js=`assets/..path to your javascript-file.../js-setup02.js`!]

...and

[!MaxiGallery? &galleryOuterTpl=`mgGalleryOuter02` &galleryPictureTpl=`mgGalleryPicture02` &manage_target=`2`!]

after uploading your pictures, you should have a gallery like on top of that page.

let's move on and add some prev/next-links to our gallery ->

Nudibranch

Reply #3 on : Wed January 25, 2012, 21:30:17

Hallo,
erstmal vielen Dank für dieses Tutorial.

Nun möchte ich aber gerne noch autoplay (siehe hier) oder vielleicht auch andere Optionen einbauen, aber ich weiß nicht wie.
Es ist irgendwie nicht der klassische Aufbau eines jquery-Aufrufs wie ich ihn kenne und durch den ich mich dann durchwuseln kann.

Wo müßte ich das einfügen?

Danke

admin

Reply #2 on : Tue August 24, 2010, 21:22:25

Hi Matt,

thanks :)
right, i removed :htmlent in the above example from "managepicturetpl.html" (maxigallery/assets/templates) and from the Chunk "mgPicture02"
j

Last Edit: August 24, 2010, 21:23:05 by admin

Matt Considine

Reply #1 on : Tue August 24, 2010, 21:16:34

Great set of examples! Just to double check : in order to get the HTML-enhanced title and description to show up, "mgPicture02" needed to have the ":htmlent" tags removed, while the template "mgGalleryPicture02" did not, right?
Again, thanks for all the work - these are very well written and useful.

Required fields are marked with *.

added jQuery for transition effects

Setup 02 - jQuery for transition effects

1. referencing jQuery

2. Our chunks for this version

3. calling MaxiGallery