Colorbox

Posted: Tue Jan 31, 2012 4:05 pm

I am looking for a Dummies tutorial on how to use colorbox in RN2.5. How to display a thumbnail of a picture then when it is clicked the colorbox shows the original picture.

registered · Posted: Tue Jan 31, 2012 4:41 pm

The website for Colorbox can be found here http://jacklmoore.com/colorbox/

The basic idea is like this, you link the thumbnail to the larger image and give it a class of colorbox.

ex:

Code:




<a href="path to full size image" class="colorbox"><img src="path to thumbnail" alt="" /></a>

Posted: Tue Jan 31, 2012 5:13 pm

Thank You.

Posted: Tue Jan 31, 2012 5:26 pm

Is there any way to do this in a forum post using url and img tags?

Posted: Tue Jan 31, 2012 5:52 pm

I do not think this is exactly what you want, but it is another reference. http://www.ravenphpscripts.com/postp146281.html

Posted: Tue Jan 31, 2012 6:53 pm

I have a forum mod here: http://trickedoutnews.com/nuken/ForumLimitMod.txt that my be what you are looking for.

Paste the text in modules/Forums/includes/bbcode.php after the following line:

Code:

// [img]image_url_here[/img] code..


   $text = preg_replace("#\[img\]((http|ftp|https|ftps)://)([^ \?&=\#\"\n\r\t<]*?(\.(jpg|jpeg|gif|png)))\[/img\]#sie", "'[img:$uid]\\1' . str_replace(' ', '%20', '\\3') . '[/img:$uid]'", $text);

You set the image size in the Forums ACP --> Extensions--> Special Categories --> Maximum Image Dimensions

registered · Site Admin Joined: Jun 04, 2004 Posts: 6437

nuken, does this resize images (or images above a certain size) and display full size in Colorbox? If so, that's AWESOME.

You might also want to point out your tweak to FCKeditor that enables you to specify a URL and colorbox to do that in News, Content, and other modules, HTML blocks, etc. that use FCKeditor. If that isn't built into RavenNuke, it should be!

Posted: Tue Jan 31, 2012 9:12 pm

Quote:

nuken, does this resize images (or images above a certain size) and display full size in Colorbox? If so, that's AWESOME.

Yes it does.

Posted: Wed Feb 01, 2012 4:06 pm

Thank you. Great support community!

Posted: Wed Feb 01, 2012 4:14 pm

If you use that mod, let me know how it works for you. I have not had time to test it extensively.

Posted: Wed Feb 01, 2012 10:26 pm

Yes, it works. Important to note that it does not affect existing posts, only posts made after the change is implemeneted.

Posted: Thu Feb 02, 2012 2:32 am

I'll have to try this as well as I often post screen shots on my site

Posted: Thu Feb 02, 2012 5:06 am

I got No love...

Excellent idea though....

I might also add that there are 2 spots in bbcode.php where "// [img]image_url_here[/img] code.." appears....the one we are looking for is line 285...the second line starts with $text (The other is 196...but that is not right one I don't think)

Here is my edited code....just to make sure I did it right...

Code:

   // [img]image_url_here[/img] code..


   $text = preg_replace("#\[img\]((http|ftp|https|ftps)://)([^ \?&=\#\"\n\r\t<]*?(\.(jpg|jpeg|gif|png)))\[/img\]#sie", "'[img:$uid]\\1' . str_replace(' ', '%20', '\\3') . '[/img:$uid]'", $text);


    //Colorbox for attached images


    global $attach_config;


$max_image_width = intval($attach_config['img_max_width']);


if ( preg_match_all("#\[img:$uid\](.*?)\[/img:$uid\]#si", $text, $images) )


{


     $image_patterns = array();


     $image_replacements = array();


     while ( list($index, $image_source) = each($images[1]) )


     {


         if ( intval($max_image_width) != 0 )


         {


             list($image_width, $image_height) = @getimagesize($image_source);


             if ( $image_width && $image_width > $max_image_width || empty($image_width) || empty($image_height) )


             {


                 $rand = rand(1, 10000);


                 $image_patterns[] = $images[0][$index];


                 $image_replacements[] = '<a class="colorbox" name="img_' . $rand . '" href="' . $images[1][$index] .'"><img src="' . $images[1][$index] .'" width="' . $max_image_width . '" alt="' . $lang['LIW_click_image'] . '" border="0" /></a><br /><span class="gensmall">' . $lang['LIW_click_image_explain'] . '</span>';


             }


             else


             {


                 $image_patterns[] = $images[0][$index];


                 $image_replacements[] = '<img src="' . $images[1][$index] . '" alt="" border="0" />';


             }


         }


         else


         {


             $image_patterns[] = $images[0][$index];


             $image_replacements[] = '<img src="' . $images[1][$index] . '" alt="" border="0">';


         }


     }


     $text = str_replace($image_patterns, $image_replacements, $text);


}


//end colorbox popup for attached images

I also have it set to 500x500 in the Forum ACP.

Dawg

Posted: Thu Feb 02, 2012 6:54 am

The code only resizes the image if it is larger than the max width set in Maximum Image Dimensions. I believe allow_url_fopen or allow_url_include has to be on for getimagesize() function to work correctly.

Posted: Thu Feb 02, 2012 7:47 am

Mine open in a new window vs the colorbox.

I will fool with it some more tonight.

Dawg

Posted: Thu Feb 02, 2012 7:53 am

Hmmm. That sounds like the jquery.js is being called after the colorbox.js or some conflict with other js.

New Member Joined: Jan 13, 2010 Posts: 6

I have found that some themes tend not to work with the mod due to the overall_header.tpl having the DOCTYPE statement and head tags in it thus being re declared.