Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

jQuery code for making post (message) thumbnails

edited October 2010 in Vanilla 2.0 - 2.8
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++;

});

}

});

Comments

  • This is really interesting, but I can't find any example on your site as I don't understand russian :)
Sign In or Register to comment.