jQuery code for making post (message) thumbnails

Mihael

Maybe someone could use this simple jQuery script...

The idea is; When a user inserts an image into message (like via some WYSIWYG editor) he usualy ads something like; <img src="http://www.somehost.com/path_to/image.jpg" />.

This jQuery code makes the image smaller and wraps it in anchor adding some attributes that are used by "lightBox" plugins, like jQuery LightBox or PrettyPhoto.

Requirement: jQuery lib

Live example: http://www.longboard.si/forum/discussion/6/jesenski-session-2010-predlagaj-lokacijo

Code:

jQuery(document).ready(function($) {

    if( $(".Message").length > 0 ) {
	
		var fpImage = $(".Message"); // message containing images
		var maxWidth = 150; // maximum width of an image inserted into message
		var rel = "prettyPhoto"; // you could use lightBox as well ... :)
		var className = ""; // whatever you want it to be...
	
		var count = 0;
	
		fpImage.each(function() {
	
			fpImage.find("img").each(function() {
			
				// prepare the link title
				var title = ( $(this).attr("title")!="" ) ? $(this).attr("title") : $(".DiscussionTabs .SubTab").text();
	
				if( $(this).width() > maxWidth ) // if the width is bigger than maximum allowed
		
					$(this)
					.css( "width", maxWidth+"px" ) // apply new maximum width
					.wrap('<a href="'+$(this).attr('src')+'" title="'+title+'" rel="'+rel+'[gallGroup'+count+']" class="'+className+'" />'); // wrap with ancho
	
			});
		
			count++;
	
		});
		
	}

});
        

setomidor

This is really interesting, but I can't find any example on your site as I don't understand russian :)