Results 1 to 5 of 5

Thread: Image Thumbnail Viewer II image already there on load

  1. #1
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer II image already there on load

    I have a quick question about this script: http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    I got it working, and made it so the div already displays an image when the page loads, but I want to make it, more specifically, that one of the thumbnails is already triggered. Currently if I scroll over the thumbnail for the image that's preloaded, the fade effect kicks in, making the image flicker. It's a minor aesthetic thing, but I looked in the .js file and was wondering if there is a way to make the page load with a specific thumbnail already anchored.

    It's not the end of the world if not, but it would make it look more polished, and I want to learn javascript anyhow

    Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    You can put this script in the head, after the scripts for the viewer:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$('[rel=enlargeimage]').eq(0).trigger('mouseover');
    });
    </script>
    You may want to preload the image though, if so use this instead:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	var $first = $('[rel=enlargeimage]').eq(0);
    	$(new Image()).load(function(){
    		$first.trigger('mouseover');
    	}).attr('src', $first.attr('href'));
    });
    </script>
    - 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:

    SilverFalls (02-04-2013)

  4. #3
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you! That's exactly what I needed.

  5. #4
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default multiple galleries, pre-load first image for each one

    I just want to share a tweak that I used when I had multiple galleries on a page. In this case the code above only pre-loads the first image in the first gallery.

    So, what I did was to add an attribute
    Code:
    class="defaultimage"
    to the link in each gallery that I wanted as the default image. Then in the head of the page, just under the gallery script, I added:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$('a[class=defaultimage]').trigger('click');
    });
    </script>

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    Then:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$('a.defaultimage').trigger('click');
    });
    </script>
    would work as well.
    - John
    ________________________

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

Similar Threads

  1. Image Thumbnail Viewer II - Default Large Image on Page load
    By doriggidy in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-17-2012, 04:53 AM
  2. Resolved Loading larger image on page load, image thumbnail viewer 2
    By Lucy92 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-24-2010, 10:38 PM
  3. Image Thumbnail Viewer II - image on page load
    By Quix in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 12-04-2007, 08:30 PM
  4. Image Thumbnail Viewer II - Default Image in Load Area Reappear
    By Intersign in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-10-2006, 03:17 PM
  5. Replies: 2
    Last Post: 11-10-2006, 03:17 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
  •