PDA

View Full Version : Question with Image Thumbnail Viewer II



malipalo
06-02-2011, 09:16 PM
PHP Photo Album script v2.11 but with
Image Thumbnail Viewer II


http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

Hello, I use the script
PHP Photo Album script v2.1 that displays my photos is perfect !

I would like to add thumbnail viewer II for the display of my images is very pretty with a "mouseover. "

My problem is that the PHP Photo Album or I need to change the line:
new phpimagealbum({
albumvar: clo, dimensions: [28,1], sortby: ["file", "asc"], autodesc: "Photo %i", showsourceorder: false,
//onphotoclick:function(thumbref, thumbindex, thumbfilename){thumbnailviewer.loadimage(thumbref.src, "fit2screen")} <== here me problem :(
})

If anyone can help me, I tried to find a solution may be too complex for me.
Oops excuse my English I speak French.
Thank you in advance.

jscheuer1
06-03-2011, 12:20 AM
The two scripts have no obvious way of working together. We could easily add the functionality of Thumbnail Viewer II to PHP Photo without using the thumbnailviewer2.js script.

Put this (along with but separate from the standard stuff for PHP Photo) in the head of your page:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$('.photodiv img').live('mouseover', function(){
$('#loadarea').empty().append('<img style="display: none;" src="' + this.src + '" alt="" />');
$('#loadarea img').fadeIn('slow');
});
})(jQuery);
</script>

Add a loadarea div somewhere in the body of the page, example:


<div id="loadarea" style="width: 600px; height: 500px;"></div>

You would probably also want to disable the native thumbnailviewer function, but this is not required. To do so comment out the line as shown:


<script type="text/javascript">

new phpimagealbum({
albumvar: jaguar, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [3,2],
sortby: ["file", "desc"], //["file" or "date", "asc" or "desc"]
autodesc: "Photo %i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
showsourceorder: true, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex, thumbfilename){
//thumbnailviewer.loadimage(thumbref.src, "fit2screen")
}
})

</script>

malipalo
06-03-2011, 10:00 AM
Votre script est exactement parfait pour moi.
Il fonctionne très bien.
Je voudrais vraiment vous remercier pour votre aide.
---
Moderator's note:

Your script is exactly perfect for me.
It works very well.
I would like to thank you very much for your help.
Please post in English, or if you would like, in both English and French. Most people here do not speak any French, so English is better even if it's not perfect.