Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Featured Image Zoomer - Change Default loaded thumbnail image

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

    Red face Featured Image Zoomer - Change Default loaded thumbnail image

    1) Script Title: Featured Image Zoomer

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    3) Describe problem: Everything is working properly, but I need to make it so the default image to load isn't the first thumbnail that is listed in my code.
    The reason I can't just change the order of the <a href>'s is that the thumbs are listed alphabetically, so the 'black item' is always listed first,
    so every page initially loads the 'black item' thumbnail.

    Basically I've got thumbs 1 2 3 4, and on page load I need #2 to display as if it was clicked (so the hover/zoom feature works).
    I'm pretty sure this can be done with some simple JavaScript and CSS, can anyone help?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    As someone on the outside looking in, I don't understand why you don't rename the black image so it isn't in number one position (or why they specifically need to be in that order), or why you dont just change the markup to reorder things.

    Can you explain a little more about why the (seemingly) obvious/easiest solution wouldn't be the best for your particular setup? And can you also provide a link to the page - maybe a working example will help illustrate?
    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

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

    Default

    First, thanks for your reply.

    Sorry, but the testing site is password protected.
    The reason I cannot just re-order them is they have to be listed Alphabetically. IE - the thumbnailed order goes something like: black, cherry, daisy, green, orange, purple, etc.
    They must stay in this order. (The short answer for why this has to be this way is some pages will link to my desired pages showcasing the certain color first.)
    I've gotten as far as using

    Code:
    <script>
    $(document).ready(function() {
        $("#the_thumbnail_to_open").trigger('click');
    	});
    </script>
    with the #id assigned to the desired <a href>,
    and this comes close, but opens the direct link URL to the image.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    To save us from guessing, can you provide a sample page that isn't protected? The page can be deleted after testing.
    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

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

    Default

    Maybe we can use the demo page as an example?
    http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    Demo #3...the 2nd thumbnail (the Saleen) needs to load when the page loads. The order of the thumbs must stay the same.
    The code below just about gets it.

    Code:
    <script>
    $(document).ready(function() {
        $("#the_thumbnail_to_open").trigger('click');
    	});
    </script>
    any suggestions, please?

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    Try absolute positioning the thumbs to change the placement visually while leaving the markup in the original order.
    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

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

    Default

    That is a really good idea. Wow. Nice thinking! This is why I like working in the web-dev industry, there's so many ways to accomplish something.
    I'd prefer a javascript onload-click method for grace's sake, but this might be my answer. I won't be able to test it out until tomorrow, I'll report back with my findings. Thanks again! :-)

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by coffee2020 View Post
    Maybe we can use the demo page as an example?
    http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    Demo #3...the 2nd thumbnail (the Saleen) needs to load when the page loads. The order of the thumbs must stay the same.
    The code below just about gets it.

    Code:
    <script>
    $(document).ready(function() {
        $("#the_thumbnail_to_open").trigger('click');
    	});
    </script>
    any suggestions, please?
    The multizoom script is in noConflict mode, so using $ will not activate anything associated with it. If I enter this into the console on the demo page:

    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');
    });
    It works to load the Saleen image in Demo 3 on that page. If you use that or similar on your page, it should come after the on page initialization for the script, and before any other instances (if any) of jQuery on the page. However, this is no guarantee it will work. The code might have to be executed on load of the page or with a short, even 0 timeout after document ready.

    One other difference is that I'm triggering the click on the thumbnail image img tag, not on the a tag, but that doesn't seem to matter.
    Last edited by jscheuer1; 04-16-2013 at 02:53 AM. Reason: add last line
    - John
    ________________________

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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    I tried this out and it did need a timeout which appeared to vary as to which browser. Which suggests it may also vary as to bandwidth. So positioning might be the better choice.
    - John
    ________________________

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

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

    Default

    That's the code I was looking for, but it is buggy as you mentioned. Thanks for the info on why it wasn't working properly. I'll toy around with it a bit.

    The absolute positioning is working, however there's a 2px difference between Chrome and Firefox in the thumb positioning. I'm trying to track down where it's being rendered from, but I'm still very open to any other suggestions until then. I really hope I can get this working properly!

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
  •