jQuery code for making post (message) thumbnails
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:
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++;
});
}
});
Tagged:
0
Comments