Advanced Search

Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18

Thread: Featured Image Zoomer - Change Default loaded thumbnail image

  1. #11
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,885
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Just to make sure, I'd zero the paddings and margins on all the elements in that block and the parent container (sometimes doing it inline while testing helps) and build them back up how you want in the CSS afterwards.

    You might need to create a stripped-back test page containing just the demo so you can make sure that paddings/margins from parents elements aren't cascading down to affect things.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  2. #12
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    The absolute positioning method won't work, I can get Chrome and FF to look good, but IE is a whole different story.

    It would be too messy to use this, as the parent div already has padding/borders, and each of the thumbnails has margins/borders.
    Also, in order to get the nth div to appear in it's alphabetized location (after it's been placed as the 1st), I've got to allow room for it by either padding the adjacent <a> or adding empty <div>.
    This creates more havoc with borders/padding/absolute positioning IE problems.

    I'll continue working with the jquery trigger click method, it seems to work most of the time, perhaps it just needs some modification. If it is a bandwidth issue, it still defaults to the first thumbnail, and that would be better than ever encountering a whacky layout with one thumbnail sticking out like a sore thumb! Also, with this method a lot of issues with forward compatibility arise because of all the IE hacks I'd have place.

  3. #13
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    This seem fairly foolproof:

    Code:
    jQuery(function($){ //shorthand for document ready which also passes a new definition of $ as the current instance of jQuery to itself
    	function desiredthumb(){$('.multizoom1.thumbs img').eq(1).trigger('click');}
    	setTimeout(desiredthumb, 100);
    	$(window).load(desiredthumb);
    });
    In most case the 100 millisecond timeout should get it, otherwise, once the page has loaded, it should catch up. You would have to try it live though to be sure and try in different browsers and clear the cache a lot because first time users and folks that don't visit often will have little if any of the resources on the page cached.

    I don't have time to do all of that testing, but since I have the page:

    http://home.comcast.net/~jscheuer1/s...aleenfirst.htm

    You could. If that one works, test with your own images.
    - John
    ________________________

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

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

    coffee2020 (04-16-2013)

  5. #14
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    This seems to be working! I've cross-browsed, and closed/re-opened numerous times and it's worked every time so far.
    I was trying
    Code:
    jQuery(function($){ //shorthand for document ready which also passes a new definition of $ as the current instance of jQuery to itself
    	$('.multizoom1.thumbs img').eq(1).trigger('click');
            setTimeout(100);
    });
    I see the difference, but it is a bit confusing why there's a function inside of a function in the correct code in the above post.
    Care to shed some light on this? Does it have to do with noConflict mode?

    Also, would you mind explaining why you've chosen 100ms instead of something quicker, like 1ms?
    To me it's seems like it would be better to load this function as soon as possible to avoid visual interference from the initial thumb that's loading as it uses a fade-in effect to display. It kind of seems like the longer the delay the more the 'reset' is noticeable.
    Last edited by coffee2020; 04-16-2013 at 06:25 PM. Reason: added second question

  6. #15
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    When you set a timeout, the function within it executes in the global scope where $ no longer means jQuery. But if you define a separate function within the scope where $ means jQuery, it will still mean that when that function is fired by the timeout. I tried 0ms, and that worked for IE, but not for Chrome. Between Chrome and IE we are talking about at least 70% of the browsers. 100ms is very short, but not even that worked all the time for Chrome, so I added the onload, which should be later. Clicking the thumb twice won't hurt anything, but if the 100ms delay was too short, the load one should pick up the slack.

    You could do three or more. 0, 1, 100, and load.

    But using just 100 and load, I never saw the original image, not even a flicker of it. Even if one did though, would it be the end of the world?
    - John
    ________________________

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

  7. #16
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    100+ internets to you sir.
    Thank you so much for solving this! I almost had it though! Hopefully this post will help serve someone else in the future.

    It seems like this would be a feature built into the script. Perhaps someone had a product gallery on showcase and a featured item that changed every month or so, and that item was to be shown first.
    I've worked with Accordion Navigation scripts before and you could assign a class of '.open' or '.loaded' etc to select a certain <div> to take on properties (in this case, the <a> to load. Or even assigning an #ID to an <a> giving it unique properties.
    Another method would be define the medium/large image in the initial jQuery page load, kind of like what you can do for the single-item-zoom here. Maybe a new version will contain such features. :-)
    Thanks again!

  8. #17
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    If you're interested, I've updated the script so that now you can use a class on the thumbnail that you want to be first, see:

    http://www.dynamicdrive.com/forums/s...lti-Zoom)-v2-2

    for more information.
    - John
    ________________________

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

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

    coffee2020 (04-22-2013)

  10. #18
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Awesome! Just what I had in mind. This works great. I'm not noticing the first thumb loading with the brief flash at all anymore. Bravo, job well done.

Similar Threads

  1. Featured Image Zoomer v1.5 &Image Thumbnail Viewer II
    By letom in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 07-09-2012, 06:44 PM
  2. Replies: 1
    Last Post: 01-24-2012, 10:02 AM
  3. Featured Image Zoomer double image in IE
    By kirkh34 in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 06-03-2011, 09:05 AM
  4. Combining "Featured image zoomer" "and "Image thumbnail viewer II"
    By novastar in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-17-2011, 10:10 PM
  5. Combining "Featured Image Zoomer" and "Image Thumbnail Viewer II"
    By pennzman543 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-05-2011, 12:26 AM

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
  •