Thumbnail Creation with Lightbox(Slimbox) or highslide effect

This plugin create a thumbnail automaticaly with all pictures that you have inserted in you html page.

The interest is to display a picture with a little size and when you click on it an effect’s running (lightbox or highslide) and you will see the original picture.

All of them was inspired by the plugins of Klaus Treichler.

The main interest of these plugins is that all of them use the official (unmodified) picture effect.

The second objectif is able to use the effect for all pictures on the page currently displayed (this, is not possible with the Klaus Treichler plugin or I don’t know when).

!!! you will see effect only if the picture size is different than the picture displayed into your html code like : <img ... width=... height=.../> !!!

Version

05/10/2008

  • Now the effect is right when you do not specify one of both dimension of the image. So if you resize only the width (so the height is proportional), the script find the missing dimension.

14/09/2008

  • Now the regular expression are case insensitive

13/09/2008

  • I’ve seen a big bug...With all my optimisation the plugin did not work for more than one image. Now it’s fixed.

12/09/2008

  • improve regular expression in both script. Now I search for :
    • <img...> not only <img.../>
    • width=”...” and width: ...px
    • height=”...” and height: ...px
  • change right access during creation of Thumb directory and thumbnail.
  • Creation of a sample project with both plugins and CMSimple 3.2. Ty it!! now that’s run perfectly!

How to install

  1. Install CMSimple 3.2 (I’ve tested only with this version)
  2. In the SETTINGS seciont, go to « Edit configuration » and set « plugins_folder » to the name of your plugin folder. (I’ve use « plugins »)
  3. Install a plugin loader. I’ve installed Pluginloader v.2.0 beta10mod
  4. Download « addon.rar » and extract it in your root folder (look at the structure for helping)
  5. Download « lightboxthumb.rar » or « highslidethumb.rar » for adding picture effect
  6. insert in your html code #CMSimple lb_thumb();# or #CMSimple hs_thumb();#
+-root
|    +-2lang
|    +-cmsimple
|    +-content
|    +-downloads
|    +-images
|    +-plugins                  <- Put plugins in this directory
|    |   +-highslidethumb
|    |   |   admin.php
|    |   |   index.php
|    |   +-lightboxthumb
|    |   |   admin.php
|    |   |   index.php
|    +-addons                  <- Put addon in this directory
|    |   +-highslide
|    |   |   +-highslide
|    |   |   |   +-graphics
|    |   |   |     highslide.js
|    |   |   |     stylesheet.css
|    |   |   |   +-...
|    |   |   +-images
|    |   +-slimbox
|    |   |   +-css
|    |   |   +-js
|    |   |   |   mootools.js
|    |   |   |   slimbox.js
|    |   |   +-src
|    |   |   |   slimbox.js
|    |   |   header.php
|    |   +-templates

Thumbnail creation with Lightbox(I use Slimbox)

Just extract the «lightboxthumb.rar» in your plugin directory

For using it just write : #CMSimple lb_thumb();#

Thumbnail creation with highslide

Just extract the highslidethumb.rar in your plugin directory

For using it just write : #CMSimple hs_thumb();#

Download Section

the latest Slimbox effect : http://www.digitalia.be/software/slimbox the latest HighSlide effect : http://highslide.com/

a RAR archive with all effect used :

a RAR archive with plugin

A Sample with all installed and configure like I said above.

Note

As I said above, I was inspired by the plugins of Klaus Treichler.

But theses plugins are completely rewrited!!!

I’ve just keep the same function call...maybe I change it later.


back to Galleries

back to Plugins

Discussion

Jaufré Devosse, 2008/09/12 14:15:

Tell me If you find bug or some interesting features. Thank MakeMyDay, 2008/09/11 22:09:

I was not able to get it running...

1. I extracted “lightboxthumb.rar” into the plugins-Folder

2. I created a folder “addons” in the root

3. I extracted the files from “addon.rar” into the addons-Folder

4. logging in to CMSimple

5. the Plugin “Lightboxthumb” is in the drop down - but when choosing it, nothing appears

6. the created a new page and entered the code #CMSimple lb_thumb();#

7. logout

8. open the newly created page > nothing is shown

any idea? Thanks in advance!

MakeMyDay

 
Martin Sereday, 2008/10/07 07:49:

Hi, Jaufré! I found some propblems to be solved:
1. It seems to be a problem with server settings. The “images/thumb” directory is created by the script. So there is the Apache-known problem about ownership. The user can’t enter/edit/manipulate/changing permissions of the directory - e.g. delet unneeded thumbs.
2. I made brand new installation at thumnail.cmsimple.sk and added some pictures. Now both effects work, but there are no thumnails created. It seems as if 755 would not be enough.
Suggestion:
How about to make a simple admin section:
with only one img_variable: thumb_size (e.g. in % of the original size)
or
with two img_variables: thumb_width (px), thumb_height(px)
and optional img border color/size (the clickable pictures shohuld have this feature to make visitor aware that the image is clickable).
Next thing I have found is that if I have more pictures on one page and make only one of them clickable by hs_thumb or lb_thumb (setting their thumb size), there occures a message “file does not exist” on the top of the page.
Maybe using of CMSimple image upload function wit some included identificator for expandible images would be the sollution.
Later I found that when the Apache-Ownership problem occures, the standard precedure may solve it. It means:
1. Use FTP access and try delete the images/thumb directory.
2. Create the same directorz again and set permissions 777

 
Jaufré Devosse, 2008/09/12 14:23:

MakeMyDay, I’ve fix some bug that I found inside script.

About your problem, these plugins do not create gallery picture. It allows you to put your image like usual on your web site and create a thumbnail automatically and add an effect when you click on it.

Regards

 
Martin Sereday, 2008/09/12 16:15:

Maybe more detailed description would help.
1. I also made all unpackings into addons and plugins directories
2. Created an empty page and inserted a picpture of 800×640 in original size, reduced to 160×128 by width/height
3. used both #CMSimple lb_thumb();# and #CMSimple hs_thumb();# on this page.
Nothing happened.
Tested with CMSimple3_0.

 
Jaufré Devosse, 2008/09/13 09:57:

Ok I found the problem and now it’s fixed. It was a regular expression for searching <img> tag. I searched only <img ... /> and not <img...>

 
Martin Sereday, 2008/09/13 12:48:

Now it works just fine. One more idea for the future version...
For less experienced users who often use only oEdit it may be difficult to enter the HTML mode and to change parameters of an image.
Would it be a problem to extend the plugin by a config section and let it resize inserted images to thumbs values (e.g. resize=15%)?
The operation then would be:
1. Set the resize value (%) for inserted thumbnails
2. Upload image - plugins creates the resized thumbnail
3. Insert image (the plugin would search for the same image name in [thumb]insert the corresponding thumbnail) The only problem I have found (I am not sure if this occures by other user too) - when I open the page with thumbs for editting and save it (with/without any editting), the function diesn’t work anymore. The path “./images/myimage.jpg” changes to http://www.mydomain.com/images/myimage.jpg
Look and try on http://test.cmsimple.sk

 
Jaufré Devosse, 2008/09/14 15:47:

I’ve try on your site : http://test.cmsimple.sk. 1. I was logged in and out : no problem 2. I changed the size of one of picture (montagne.jpg) in both effect menu (high slide and lightbox): no problem. 3. I added a second time the picture « montagne.jpg » and I met no problem too.

Maybe you need to clean the cache of your browser otherwise, if you have not change scripts, I do not understand because for all of them, about the thumbnail path, I’ve writing a parameter in my script at line 24 : $thumbPath = “images/thumb”; so it’s impossible, for me, that the picture path begin by other thing that images/thumb following by your picture name.

If you meet again this problem could you explain me more and like your previous message give me a url to a cms site with the problem. By the way I can see it directly.

Thank.

 
Martin Sereday, 2008/09/14 16:45:

Look now on the same page. I made nothing but cleared the cash - logegd in - saved - logged out. The functinality is gone. Should you need my FTP access. send me a message at info[at]cmsimple[dot]sk.

 
Jaufré Devosse, 2008/09/14 18:09:

Ok, when I’m going to your site http://test.cmsimple.sk. Effectively I’ve met a problem with the high slide effect. There no link on picture for this effect. So I’ve just change #CMSimple hs_thumb(); # to #CMSimple lb_thumb(); #. After I’ve clicked on “normal mode” and the lightbox effect was nice. So I’ve go back to “Edit mode” and rechange #CMSimple lb_thumb(); # to #CMSimple hs_thumb(); # and make same thing (going to “Normal Mode” and try it). I’ve met no problem. Now I’ve just try after log out and all work nice so could you explain me exactly what you’ve made because I want to help you and improve my plugin but I really do not understand what’s happen.

Regards

 
Martin Sereday, 2008/09/14 19:17:

The new image is the only I added. I don’t know what may be wrong. But after saving the change the effect is gone (at least in mz browsers - IE7, FF3). I would maybe prefer Skype to chat together instead of this area (nick:sereday999)

 
Jaufré Devosse, 2008/09/14 21:10:

Oufff, I’ve seen your problem.

In fact all my html code and also the code generate by the default editor of CMSimple is in lower case. So I search tags : img, width, height.

BUT in YOUR code you have write this tag in UPPER CASE so it’s <IMG style=”WIDTH: 199px; HEIGHT: 151px” src=”./images/Castle_in_the_night_800.jpg”>.

the plugin I’ve write is waiting for : <img style=”width: 199px; height: 151px” src=”./images/castle_in_the_night_800.jpg”>.

I had this change to the plugin. wait 30 minutes :o)

 
Martin Sereday, 2008/09/15 08:26:

Well, now I see the reason (I hope). The plugin is case insensitiv now. That’s OK. But it strongly requires the dimension written in this form:
width=”123” height=”123” or WIDTH=”123” HEIGHT=”123”
oEdit and openwysiwyg editors however remove quotes and save it like
width=123 height=123 or WIDTH=123 HEIGHT=123
That makes the plugin not functioning. As the editors evidently stripe out the quotes, it would be necessary to change the plugin so that it would accept the values also without quotes.
A config file would make the plugin more comfortable.

 
Martin Sereday, 2008/09/15 09:56:

Download the openwysiwyg from
http://cmsimple.sk/downloads/openwysiwygv147_by_JAT.zip
The only you need is cope of the archive into your CMSimple installation and then put the openwysiwyg into your config as external editor. Or you may use the switcheditor plugin.
P.S.
Sorry, I saw yor e-mail only a couple of seconds. Have not saved it.

 
Jaufré Devosse, 2008/09/15 10:49:

don’t worry. Google is my best friend in this situation. I’ve found it. So I will test tonight. thank you again. Have a good day.

 
plugins/thumbnail_creation_with_lightbox_slimbox_or_highslide_effect.txt · Last modified: 2008/10/05 22:29 by yuyuki