Hey all,
I am super excited about this module and have begun to play with it. I started to overwrite all the javascript files as goldsky suggested to get the scripts back to their original states. I love the upload functionality and the thumbnail generation. What I really want to learn is how to get it to display thumbs and the large image on the same page. I have created a test page at
http://www.learnerdesign.com/test-gallery.html To do this I tried to port the maxigallery solution from the wiki / Sharkbait’s excellent examples on his website. I changed the thumbnail template to:
<div class="thumb">
<a href="javascript:showPic('assets/modules/easy2/show.easy2gallery.php?id=[+easy2:id+]','[+easy2:title:htmlent+]','[+easy2:description:htmlent+]')" /> <img src="[+easy2:src+]" alt="[+easy2:title+]" width="[+easy2:w+]" height="[+easy2:h+]"></a>
</div>
and I used this code to handle image transitions
//js-setup02.js by Sharkbait
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".thumb").hover(function(){
jQuery(this).fadeTo("fast", 0.6); // This sets the opacity to 60% on hover
},function(){
jQuery(this).fadeTo("fast", 1.0); // This sets the opacity back to 100% on mouseout
jQuery("div.thumb").click(function() {
jQuery('.aktiv').removeClass('aktiv');
jQuery(this).addClass('aktiv');
});
});
});
function showPic(url,title,descr,width,height) {
jQuery("#maxImage").fadeOut("slow", function(){
var image = new Image();
jQuery(image).load(function() {
jQuery(this).hide();
// with the holding div #loader, apply:
jQuery('#picturecontainer')
// remove the loading class (so no background spinner),
// then insert our image
.append(this);
jQuery("#maxImage").attr({
src: url,
width: width,
height: height
});
jQuery("#maxImage").fadeIn("fast");
jQuery("#maxTitle").html(title);
jQuery("#maxDescr").html(descr);
jQuery('#picturecontainer').addClass('loading')
});
jQuery(image).attr({src: url,width: width,
height: height});
});
}
I created a new folder in the assets/libs/ named noah and put the Sharkbait’s javascript named js-setup02.js in there.
I then went to line 1151 the module code and added this after
<option value="js-setup02"'.(($e2g['glib']=='js-setup02')?' selected':'').'>Noah test</option>
so that I will see this code as a choice in the module’s pull down.
I then went into the snippet code and added this after line 350
if ($glib == 'js-setup02') {
$modx->regClientStartupScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
$modx->regClientStartupScript($modx->config['base_url'].'assets/libs/noah/js-setup02.js');
}
SOOOOO . . it needs a bit of help. It displays fine in ie 8 and ie7, but it doesn’t display quite right in firefox. When you click on a thumbnail, the current image is hidden and then it reappears for a noticable instant and then the new image appears. I know it has to do with the js-setup02.js code, but I don’t see how to fix it.
Any Ideas? My other wish is to have the first image in the slideshow appear in the picturecontainer dynamically on document ready, but I couldn’t figure out how to do that so i just hardcoded
<div id="picturecontainer">
<span id="maxTitle"> </span><br />
<p id="maxDescr"></p>
<img id="maxImage" class="hideSlide" src="assets/images/blank.gif">
</div>
into template.
You guys are much smarter than I am and I hope you see how to do it. The other problem is that the titles and descriptions aren’t getting updated eash time there is a click. What do I need to change?
I appreciate all your help in advance and hope this helps someone on the path to thumbs and images on the same page
-Noah