Results 1 to 8 of 8

Thread: Image Thumbnail Viewer II Style Help

  1. #1
    Join Date
    Dec 2005
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Image Thumbnail Viewer II Style Help

    1) Script Title: Image Thumbnail Viewer II

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

    3) Describe problem: We are using this script on this page;
    http://www.lanitech.com/clients/hillcrest/tour.htm

    We want to know 1) how we can change the font of the description since there is no stylesheet with this script and 2) how do we prevent the title="" from popping up when you put your mouseover the text links?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    For #1, use the id of the targetdiv as the selector. Say you have:

    Code:
    <a href="some.jpg" rel="enlargeimage" rev="targetdiv:loadarea" 
    title="The Universe is just waiting to be explored">Saturn #1</a>
    Then you could have a style rule like:

    Code:
    #loadarea {
    	color: red;
    	font-family: verdana, arial, sans-serif;
    	font-size: 90%;
    }
    For #2 see:

    http://www.dynamicdrive.com/forums/s...1&postcount=27

    Let me know if you have any questions.
    - John
    ________________________

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

  3. #3
    Join Date
    Dec 2005
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much for the idea for #1. That worked great!

    However #2 is not what I was looking for. I do not want to hide the caption that is underneath the picture but the light yellow box that appears when you put your mouse over any of the links on the left -- I guess you call that the Tooltip -- I want to hide the Tooltip only. It looks tacky because the titles are so long. I thought for sure others had already asked how to make it not do this but I couldn't find anyone who has.

    Any ideas?
    Last edited by vlane95678; 12-08-2010 at 01:14 AM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    That's what #2 does, it hides the tooltip.
    - John
    ________________________

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

  5. #5
    Join Date
    Dec 2005
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Hmm because I did #2 and then all the text underneath the image disappeared. I want to keep that text but not show it when you mouseover the links on the left.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Well then, now I might be in error, but I don't think so. If I'm not, then you've done something other than was recommended.

    I know it's hard to follow jumping into a thread at one post like that, and it was a convoluted thread at that.

    Setup your version:

    I did #2 and then all the text underneath the image disappeared
    live. It can be a separate page, not linked to from your other pages. Give me a link to it and I can probably figure out how to get it working as you want.


    There are two things going on in that post #27. First they wanted the description on top of the enlarged image. Later they also wanted to get rid of the tooltip. The advice in post #27 of that thread did both. But it can optionally do only one or the other. You need to use the updated thumbnailviewer2.js file linked to at the bottom of that post #27, and the syntax supplied in that post, tailored to how you want things displayed.

    Like:

    Code:
    <a title="Some long title that you don't want to be a tooltip" href="whatever.jpg" 
    rel="enlargeimage" rev="targetdiv:loadarea,hidetitle:yes">Trigger Text or Image Tag</a>
    If after you've gone through that, you are still having problems, like I say - put up a demo of your best effort and I can probably get it working for you.
    - John
    ________________________

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

  7. #7
    Join Date
    Dec 2005
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Oh one more thing...how do I make the anchor text (cause I changed the image thumbs to text) to open a html page instead of an enlarged version of the image?

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    That's a common request. Which HTML page? Often it's the one that clicking on the larger image would open. If so add this script to the head of the page:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	var re = /:(?!\/\/)/;
    	$('a[rel=enlargeimage]').click(function(e){
    		var opts = {}, rev = this.rev.split(','), i = rev.length - 1;
    		for (i; i > -1; --i){
    			rev[i] = rev[i].split(re);
    			opts[$.trim(rev[i][0])] = $.trim(rev[i][1]);
    			if(opts.link){
    				e.preventDefault();
    				location.href = opts.link;
    				return;
    			}
    		}
    	});
    });
    </script>
    Once you have that, use this syntax for the trigger:

    Code:
    <a title="Some long title that you don't want to be a tooltip" href="whatever.jpg" rel="enlargeimage" 
    rev="targetdiv:loadarea,hidetitle:yes,link:whatever.html">Trigger Text or Image Tag</a>
    Replace whatever.html with the address to the page you want it to link to.
    - John
    ________________________

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

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
  •