How to display picture and thumbnails and add Mootools effects

22 Posts

dirtyharry_10 Reply #1, 17 years, 10 months ago

Hi guys,

I have very limited Javascript knowledge and I am trying to place some mootools’ effects on my gallery. The Javascript below works fine but changing from image to image it’s a bit clunky. I would like to have a fade in and out on click but I have no idea how to implement this, i’m guessing that you apply the effects to the ’maxImage’.

Thanks in advance for your help!

<script type="text/javascript">
function showPic(url,title,descr,width,height) {
		var img = document.getElementById('maxImage');
		var titleHolder = document.getElementById('maxTitle');
		var descrHolder = document.getElementById('maxDescr');
       img.src=url;
       img.width=width;
       img.height=height;
       if (titleHolder != null) {
               for (var i = 0; i < titleHolder.childNodes.length; i++) {
                       titleHolder.removeChild(titleHolder.childNodes[i]);
               };
               if (title != "") {
                       var node=document.createTextNode(title);
               }
               else {
                       var node=document.createTextNode("");
               }
               titleHolder.appendChild(node);
       }
       if (descrHolder != null) {
               for (var i = 0; i < descrHolder.childNodes.length; i++) {
                       descrHolder.removeChild(descrHolder.childNodes[i]);
               };
               if (descr != "") {
                       var node=document.createTextNode(descr);
               }
               else {
                       var node=document.createTextNode("");
               }
               descrHolder.appendChild(node);
       }
}
</script>

4,213 Posts

doze Reply #2, 17 years, 10 months ago

I don’t know about mootools, haven’t looked into it much... but in jQuery this should do it:

function showPic(url,title,descr,width,height) {
  $("#maxImage").fadeOut("fast", function(){
      var image = new Image();
      $(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
        $(image).hide();
        $("#maxImage").attr({
          src: url,
          width: width,
          height: height
        });
        $("#maxImage").fadeIn("fast");
        $("#maxTitle").html(title);
        $("#maxDescr").html(descr);
      });
  });
}

If you want to have mootools on the page too, you can run jQuery in "no-conflict mode" and have them both.

If you want to "autoload" the first image by default, you can for example do this:

Set id="maxImage[+maxigallery.picnumber+]" attribute in the galleryPictureTpl chunk to the link tag.

Add following to galleryOuterTpl:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() { 
    $("#maxImage1").click();
});
//]]> 
</script>

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

22 Posts

dirtyharry_10 Reply #3, 17 years, 10 months ago

Thanks for your quick response Doze,

Using jQuery is fine for me!

I inserted your code into my JavaTpl but unfortunately nothing now works as a result.

This is what I tried -

<script type="text/javascript">
function showPic(url,title,descr,width,height) {
		var img = document.getElementById('maxImage');
		  $("#maxImage").fadeOut("fast", function(){
      var image = new Image();
      $(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
        $(image).hide();
        $("#maxImage").attr({
          src: url,
          width: width,
          height: height
        });
        $("#maxImage").fadeIn("fast");
        $("#maxTitle").html(title);
        $("#maxDescr").html(descr);
      });
  });
}
		var titleHolder = document.getElementById('maxTitle');
		var descrHolder = document.getElementById('maxDescr');
       img.src=url;
       img.width=width;
       img.height=height;
       if (titleHolder != null) {
               for (var i = 0; i < titleHolder.childNodes.length; i++) {
                       titleHolder.removeChild(titleHolder.childNodes[i]);
               };
               if (title != "") {
                       var node=document.createTextNode(title);
               }
               else {
                       var node=document.createTextNode("");
               }
               titleHolder.appendChild(node);
       }
       if (descrHolder != null) {
               for (var i = 0; i < descrHolder.childNodes.length; i++) {
                       descrHolder.removeChild(descrHolder.childNodes[i]);
               };
               if (descr != "") {
                       var node=document.createTextNode(descr);
               }
               else {
                       var node=document.createTextNode("");
               }
               descrHolder.appendChild(node);
       }
}
</script>

Thanks in advance for your help!

4,213 Posts

doze Reply #4, 17 years, 10 months ago

You can put the showPic js function that’s in my post just as is to your JavaTpl, nothing else.

Also make sure that you have jQuery js library added to your page. If it doesn’t work after you have checked these two points, could you give an online url for me to check?

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

22 Posts

dirtyharry_10 Reply #5, 17 years, 10 months ago

Hey Doze,

No luck i’m affraid. I downloaded jQuery and popped it in my assets/js folder and put that in my head.

you can see the gallery at - http://121photo.co.uk/index.php?id=50

Thanks again!

4,213 Posts

doze Reply #6, 17 years, 10 months ago

Have you looked at the source of that page? Currently you have the js in there like this:

<script type="text/javascript" src="function showPic(url,title,descr,width,height) {
  $("#maxImage").fadeOut("fast", function(){
      var image = new Image();
      $(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
        $(image).hide();
        $("#maxImage").attr({
          src: url,
          width: width,
          height: height
        });
        $("#maxImage").fadeIn("fast");
        $("#maxTitle").html(title);
        $("#maxDescr").html(descr);
      });
  });
}"></script>

You should have this:

<script type="text/javascript">
//<![CDATA[
function showPic(url,title,descr,width,height) {
  $("#maxImage").fadeOut("fast", function(){
      var image = new Image();
      $(image).attr({src: url, width: width, height: height, id: 'maxImage'}).load(function() {
        $(image).hide();
        $("#maxImage").attr({
          src: url,
          width: width,
          height: height
        });
        $("#maxImage").fadeIn("fast");
        $("#maxTitle").html(title);
        $("#maxDescr").html(descr);
      });
  });
}
//]]> 
</script>

Is that what you have in your js chunk? how are you including the js to your document, via MaxiGallery somehow or what?

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

22 Posts

dirtyharry_10 Reply #7, 17 years, 10 months ago

Sorry Doze, I was at work and should have checked what i inputted sad

ok i’ve cleared up my Maxi calls and this is what I have -

This is the Maxi call on the page

[!MaxiGallery? &galleryPictureTpl=`mgGalleryPicture` &js=`mgJs` &max_thumb_size=`100` &max_pic_size=`585` &manage_target=`47`!]

[!MaxiGallery? &pictureTpl=`mgPicture` &display=`pictureview` &manageButtonTpl=`` &manage_target=`47`!]

Beacause I have multiple galleries I have put the manager on 47 - here is the call

[!MaxiGallery? &galleryPictureTpl=`mgGalleryPicture` &max_thumb_size=`100` &max_pic_size=`585` &is_target=`1`!]

mgGalleryPicture

<div class="thumb58">
<li>
       <a href="javascript:void(0);"
onClick="javascript:showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]','[+maxigallery.picture.title:htmlent+]','[+maxigallery.picture.descr:htmlent+]',[+maxigallery.picture_width_normal+],[+maxigallery.picture_height_normal+]);return
false;">
               <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]"
class="thumbnail" title="[+maxigallery.picture.title:htmlent+]"
alt="[+maxigallery.picture.title:htmlent+]" />
       </a>
</li>
</div>

mgPicture

<div class="picturecontainer">
       <img id="maxImage"
src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
alt="[+maxigallery.picture.title:htmlent+]" />
       <p id="maxTitle">[+maxigallery.picture.title:htmlent+]</p>
       <p id="maxDescr">[+maxigallery.picture.descr:htmlent+]</p>
</div>
<div class="bottomline">
</div>

4,213 Posts

doze Reply #8, 17 years, 10 months ago

So it works now or not?

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

22 Posts

dirtyharry_10 Reply #9, 17 years, 10 months ago

No it’s not working... probably something small that i’m not seeing.

any ideas?

4,213 Posts

doze Reply #10, 17 years, 10 months ago

What is not working? The gallery seems to work fine on the link you gave above. Pictures are changing with fade in/out effects.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."