Problems, need help? Have a tip or advice? Post it here.
9 posts Page 1 of 1
I had a play today again, its coming long nice the new website design, i mean its proper pro haha. I have a solution to cover my gallery ideas, which of course will allow me to post my images.

Currently i have this feature i had a play with

http://www.revlimitmag.com/features/index.php?p=60

you can see two thumbles that i posted, the white evo and the blue subaru. Now they can be clicked on and opend into a new window, however can i have the images that are linked to not open in a new window but have the option to open in light box? ive not used light box in a while now however i want to add this.

anychance?
Hi Simon,

The procedure for Lightbox 2 (get it from http://www.huddletogether.com/projects/lightbox2/) is -
1. Add the following in your template's header (make sure the paths are valid for your site)
Code: Select all
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


2. Add a rel="lightbox" attribute to the anchor tag surrounding your image thumbnail
Code: Select all
<a href="images/image-1.jpg" rel="lightbox">
   <img src="images/thumb-1.jpg" width="100" height="40" alt="">
</a>


Hope this helps.
KK wrote: Hi Simon,

The procedure for Lightbox 2 (get it from http://www.huddletogether.com/projects/lightbox2/) is -
1. Add the following in your template's header (make sure the paths are valid for your site)
Code: Select all
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


2. Add a rel="lightbox" attribute to the anchor tag surrounding your image thumbnail
Code: Select all
<a href="images/image-1.jpg" [b]rel="lightbox"[/b]>
   <img src="images/thumb-1.jpg" width="100" height="40" alt="">
</a>


Hope this helps.


Would this be in couch? as in the tags its self. So i add the image and re-size it to smaller, to its set like a thumble, then go into links within the image properites, link it to the image where its kept, then use the Target tag? will the lightbox tag be there? or would i need togo into the source code within couch? and add it myself?
Hi Simon,

Suppose you have a template named 'portfolio.php' and it has two editable regions - one of type image named 'my_image' and the other associated with it of type thumbnail named 'my_thumb'.

This is how you normally display the thumbnail that is linked to the bigger image -
Code: Select all
<a href="<cms:show my_image />" >
   <img src="<cms:show my_thumb />" >
</a>

right?

To make the bigger image pop-up within a light box instead of opening in a separate page, you simply make the following change to the code above
Code: Select all
<a href="<cms:show my_image />" rel="lightbox">
   <img src="<cms:show my_thumb />" >
</a>

That "rel="lightbox" is what hooks up the lightbox JavaScript to the thumbnails.

Of course, you need to link the .js and .css files to your 'portfolio.php' template.
Suppose you keep all the .js files of your site within a folder named 'js' and all the 'css' files within a folder named 'css'.
Go to http://www.huddletogether.com/projects/lightbox2/ and download the lightboxes js and css files and place them in the folders mentioned above.
Now find the <HEAD> html tag within your 'portfolio.php' template and place the following code between the <HEAD> and </HEAD> tags -
Code: Select all
<script type="text/javascript" src="<cms:show k_site_link />js/prototype.js"></script>
<script type="text/javascript" src="<cms:show k_site_link />js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<cms:show k_site_link />js/lightbox.js"></script>
<link rel="stylesheet" href="<cms:show k_site_link />css/lightbox.css" type="text/css" media="screen" />

That should do the trick.
Let me know :)
Just to re-highlight here's a snap shoot of what i've done.

Image

As you can see all i did was upload the image, place onto the text area, resized it down to around 200px by 200px and then linked to file location, then set it to open in new window. I think ill find this much more productive todo when uploading more images, its not too much hard work at all and can do it easy for a temp solution ;) wink wink.

but i dont want it to open in a new window, i want it to open in couch, so in the image properties and within the link tab, then the target area it would be cool if i could add the item Lightbox. rather than the options you get now, or added to them options.

Not sure how this would work? i understand how to imput the lightbox code however i wanted to know if i can do this within couch, as i feel this would make it easy to imput onto the website, and upload all the images via my FTP client
Hi,

Okay, so you want the images that are embedded within the wysiwyg editor to open up in the lightbox.

For this, you'll manually have to add the rel="lightbox" to the anchor tags surrounding the images.
Click the last button of the last row in the editor's toolbar that says 'source'.
This will show you the raw HTML code of what you have inputted in the editor.
Find the code for your image. Should be something like this -
Code: Select all
<a target="_blank" href="http://www.revlimitmag.com/couch/uploads/image/features/gates/ryan-new-evo.jpg"><img style="border-style: solid; border-width: 0px; height: 100px; width: 150px; margin-left: 2px; margin-right: 2px;" src="http://www.revlimitmag.com/couch/uploads/image/features/gates/ryan-new-evo.jpg" alt=""/></a>

Add the rel="lightbox" to the 'a' tag so that it becomes -
Code: Select all
<a target="_blank" href="http://www.revlimitmag.com/couch/uploads/image/features/gates/ryan-new-evo.jpg" rel="lightbox"><img style="border-style: solid; border-width: 0px; height: 100px; width: 150px; margin-left: 2px; margin-right: 2px;" src="http://www.revlimitmag.com/couch/uploads/image/features/gates/ryan-new-evo.jpg" alt=""/></a>


Do this for all images you want to open up in lightbox.

Of course, you also need to edit your template and put the links to the .js and .css files as detailed in the last post.
simon i got this hack here.
http://www.chilipepperdesign.com/2010/0 ... ckeditor-3
to work on my test site. here is a example
http://echoes.net63.net/blog.php?p=132

basically all you do is replace a couple files in ckeditor and then you can set whether you want a photo placed in ck editor to open in a light box or just open normally in another window, it is a hack but it does work. if you have problems making it work just message me here.
you still have to call the light box in the html but it saves from having to manually add the rel statements outside of ckeditor.
Thanks for that, i will speak with KK before i hack anything.

No offence intended however this may breach the terms of use by couch, and im a supporter and a partner within couch. :mrgreen:
Hey Simon,

CKEditor is a third part tool and it is perfectly OK to modify it as you wish.
The hack sourpea suggested seems to be good one.
Just remember to make the changes again if you upgrade to a version of Couch that has a newer version of CKeditor.
9 posts Page 1 of 1