Results 1 to 5 of 5

Thread: Image Thumbnail Viewer II - large image dimension, link on thumbnail & title format

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

    Default Image Thumbnail Viewer II - large image dimension, link on thumbnail & title format

    1) Script Title:
    Image Thumbnail Viewer II

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

    3) Describe problem:
    Hi, i've just started using the above mentioned script, but i have got stuck on the following 3 problems. I hope someone can help me here:

    I am using thumbnail images that activate the larger image on mouseover.

    i)how do i set the larger image so that it takes a 100% width? I tried putting width="100%" almost everywhere, but nothing has worked for me - the large image just takes the dimensions of the actual image.

    ii)When actually clicking on the thumbnail image, it links to the page where the image is actually located, ie www.domain.com/images/image1.jpg. How do i make it so that i go nowhere when i click on the thumbnail?

    iii) Is there a way i can format the title which shows underneath the large image, so that i can make it bigger, change the font/color etc - can i use css in conjunction with this?

    Thank you for your time!
    James

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    Code:
    .DDImage {
     width:100%;
    
    }

    Code:
    	dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
    	buildimage:function($, $anchor, setting){
    		var imghtml='<img class="DDImage" src="'+$anchor.attr('href')+'" style="border-width:0;" />'
    		if ($anchor.attr('name'))
    			imghtml='<a href="'+$anchor.attr('name')+'">'+imghtml+'</a>'
    		imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
    		return $(imghtml)
    	},
    
    	showimage:function($image, setting){
    		$image.stop()[setting.fxfunc](setting.fxduration, function(){
    			if (this.style && this.style.removeAttribute)
    				this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
    		})
    	}
    
    }
    Code:
    <a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" name="http://www.vicsjavascripts.org.uk/" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">Saturn #1</a><br />
    
    
    <div id="loadarea"></div>
    
    
    or
    
    
    Code:
    	dsetting: {trigger:'mouseover', preload:'yes', fx:'fade', fxduration:500, enabletitle:'yes'}, //default settings
    	buildimage:function($, $anchor, setting){
    		var imghtml='<img class="'+$anchor.attr('class')+'" src="'+$anchor.attr('href')+'" style="border-width:0;" />'
    		if ($anchor.attr('name'))
    			imghtml='<a href="'+$anchor.attr('name')+'">'+imghtml+'</a>'
    		imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
    		return $(imghtml)
    	},
    
    	showimage:function($image, setting){
    		$image.stop()[setting.fxfunc](setting.fxduration, function(){
    			if (this.style && this.style.removeAttribute)
    				this.style.removeAttribute('filter') //fix IE clearType problem when animation is fade-in
    		})
    	}
    
    }
    with
    Code:
    <a class="DDImage" href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" name="http://www.vicsjavascripts.org.uk/" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored"><img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" /></a><br />
    Last edited by vwphillips; 01-21-2013 at 12:54 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much,

    unfortunately i can only work on this at weekends, hence my late reply.

    I have used your code above to resolve the image resizing issue, but i don't think there's anything in the code above that resolves the clickable thumbnail problem - is there?? i don't understand it if the answer is there - i've tried adjusting the segments you highlighted red.

    Could you please specify how i can get the thumbnail images not to be clickable (they are just activated by the mouse over)?

    Many thanks
    James

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    I haven't been following the rest of this. But to prevent the click on the triggers, put this script in the head of the page after the scripts for thumbnail viewer:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$('a[rel=enlargeimage]').click(function(e){
    		e.preventDefault();
    	});
    });
    </script>
    - John
    ________________________

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

  5. #5
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    brilliant! thank you so much

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, 03:53 AM
  2. Replies: 2
    Last Post: 05-18-2012, 02:36 AM
  3. Resolved Click thumbnail and go to same link as large image.
    By madcoversite in forum Dynamic Drive scripts help
    Replies: 19
    Last Post: 05-21-2009, 05:31 PM
  4. Image Thumbnail Viewer II - Make the large image a hyperlink?
    By vlane95678 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-12-2009, 05:41 PM
  5. Thumbnail viewer - large image does not display
    By antho84 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-20-2007, 02:58 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
  •