Advanced Search

Results 1 to 5 of 5

Thread: Large Image Visible on Load Without Mouse Action

  1. #1
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Large Image Visible on Load Without Mouse Action

    1) Script Title: Image Thumbnail Viewer II

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

    3) Describe problem: I would like to have one of the large images visible when the page loads without the user having to mouse over or click.
    What is an easy way to do that on this viewer?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    Just hard code it into your load area, ex:

    HTML Code:
    <div id="loadarea" style="width: 600px"><img src="whateveryoulike.jpg" alt=""><br>
    Optional text here if you want it</div>
    You can put anything you want in there. It will be overwritten the first time a trigger is activated (thumbnail is moused over or clicked).
    - John
    ________________________

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

  3. #3
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you. While this works - somewhat - I have some concerns.
    First, the thumbnailviewer2.js script contains the location of the large image. I prefer to have that controlled by my .css page. So I changed the javascript to:
    var $hiddenimagediv=$('<div >').css({position:'absolute',visibility:'hidden',left:0,top:0}).appendTo(document.body)

    Second, when I put the title under the image, so that it displays on page load, it takes two <br /> tags to position it below the image instead of underneath the image, and then it does not line up vertically with the javascript-generated image on click.
    Third, the title does not center under the image. I have tried textalign: center, but so far no joy. It would be nice to have these titles line up exactly.

    Fourth, it would be nice to have the ability to do an implicit click on load in the <body> tag to have the large image load automatically.
    Last edited by syswriter; 10-14-2011 at 11:12 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    I can assure you that very many folks have followed that advice with no problem. But you do seem to indicate you're not working from the official version of the script. That may or may not be the explanation. And because of that I may need a link to your page to really figure this out for you. Suffice it to say though that you kind of lost me with your explanation of the problem with this solution, but I think I caught back up at the end:

    Quote Originally Posted by syswriter View Post
    Fourth, it would be nice to have the ability to do an implicit click on load in the <body> tag to have the large image load automatically.
    That implies that your thumbnails are activated by click. If so, we can do that. But we can also do it a little sooner by using jQuery's document ready approach. Here's how that would work - Put this script in the head of the page after the script tag for thumbnailviewer2.js:

    Code:
    <script type="text/javascript">
    jQuery(document).ready(function($){
    	$('a[rel="enlargeimage"]').eq(0).click();
    });
    </script>
    That's it. If you're using mouseover:

    Code:
    <script type="text/javascript">
    jQuery(document).ready(function($){
    	$('a[rel="enlargeimage"]').eq(0).mouseover();
    });
    </script>
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If you're still having problems and want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  5. #5
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you. That solved the problem. That code should be part of the standard script. In my opinion, most people would want to see a large image when the page first loads.

    I have modified the thumbnailviewer2.js script to eliminate all of the positioning information. It is more useful in the page header or on a .css page.

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
  •