www.webdeveloper.com
Results 1 to 2 of 2

Thread: Swap image

  1. #1
    Join Date
    Jul 2010
    Posts
    50

    Swap image

    Hi all,

    I have a row of thumbnails and when you click on one thumbnail I need it to open the larger version and display that in another div.

    Here is my code:-

    Code:
    $('#thumbs img').live('click', function(){
       $('#largeImage').attr('src',$(this).attr('src').replace('46x57','199x319'));
    });
    The trouble is the images are being called from Wordpress and if I change the settings so the images are not cropped to exact size (which is what I need) then the height of the image generated by Wordpress is different.

    So I need a way of changing the last part of line to .replace('46x*','199x*')

    The * (Astrix) will allow that part of the file name to be any number.

    Any ideas?

    I hope I explained correct but any questions please let me know.

    Thank you kind people.

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    The following code will convert the height of thumbnail to the large image's height more dynamically.
    Code:
    var sizes = {57:319, 76:365, 99:385}; // 57=thumb height, 319=corresponding large image height etc.
    $('#thumbs img').live('click', function(){
    	$('#largeImage').attr('src',$(this).attr('src').replace(/46x([\d]+)/,function(match,thumbHeight){
    		// use the size in "sizes" if it exists, else use the same height as the thumb
    		return '199x'+(sizes[thumbHeight] || thumbHeight);
    	}));
    });
    Maybe you'd want to fetch or calculate the large image height in some other way, but this is how you can use regular expressions to change the image url.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles