Results 1 to 3 of 3

Thread: Question with Image Thumbnail Viewer II

  1. #1
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Lightbulb Question with Image Thumbnail Viewer II

    PHP Photo Album script v2.11 but with
    Image Thumbnail Viewer II


    http://www.dynamicdrive.com/dynamici...photoalbum.htm
    http://www.dynamicdrive.com/dynamici...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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <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:

    Code:
    <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>
    Last edited by jscheuer1; 06-03-2011 at 12:34 AM. Reason: minor change
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    malipalo (06-03-2011)

  4. #3
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Votre script est exactement parfait pour moi.
    Il fonctionne très bien.
    Je voudrais vraiment vous remercier pour votre aide.
    ---
    Moderator's note:
    Quote Originally Posted by Translation
    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.
    Last edited by djr33; 06-03-2011 at 06:47 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •