How can I open an image inside a default content block in lightbox?
Permalink 3 users found helpful
Hello everyone,
I'm using C5 for a while now to get used to it and learn the do's and dont's, theming and so on.
Very fine work so far, imho the best cms concerning usability for non-geekish endusers. Such are my clients. BUT: still did not figure out one feature I would appreciate. If I add a normal content block, I can insert images from the file manager and make them float left, right etc. But I would like to open these images in a lightbox. Usually, that makes up the need for an image which is a link to the bigger image, and the "rel"-attribute in the img-tag.
Is there any way to implement such functionality in TinyMCE? I have basic knowledge of php etc, so maybe I can accomplish it with a litte help from this forum.
Thanks so far!
Greetings from Germany,
Stefan
I'm using C5 for a while now to get used to it and learn the do's and dont's, theming and so on.
Very fine work so far, imho the best cms concerning usability for non-geekish endusers. Such are my clients. BUT: still did not figure out one feature I would appreciate. If I add a normal content block, I can insert images from the file manager and make them float left, right etc. But I would like to open these images in a lightbox. Usually, that makes up the need for an image which is a link to the bigger image, and the "rel"-attribute in the img-tag.
Is there any way to implement such functionality in TinyMCE? I have basic knowledge of php etc, so maybe I can accomplish it with a litte help from this forum.
Thanks so far!
Greetings from Germany,
Stefan
gotta love google translate ;)
hehe cheater :P
Guten Morgen,
danke erstmal :) Lightbox und Derivate allgemein ist klar ;)
Mir gehts um die Bilder, die im Standard-Content-Block eingebunden werden können, also im TinyMCE in den Fließtext.
Kaufen könnte ich natürlich trotzdem (werde ich auch), aber mir gehts ums Lernen wie es geht...
Trotzdem erstmal Danke, viel Glück bei den Klausuren!
Stefan
*switching to bad english*
Good Morning folks,
thanks so far... hm... google's english is even worse... ;)
I mean the images in default c5 content blocks. Other blocks work fine, but I need lightbox for pics in the text.
I even would buy an addon, but first of all want to learn how this could work before I throw coins on you :)
Still trying,
Stefan
danke erstmal :) Lightbox und Derivate allgemein ist klar ;)
Mir gehts um die Bilder, die im Standard-Content-Block eingebunden werden können, also im TinyMCE in den Fließtext.
Kaufen könnte ich natürlich trotzdem (werde ich auch), aber mir gehts ums Lernen wie es geht...
Trotzdem erstmal Danke, viel Glück bei den Klausuren!
Stefan
*switching to bad english*
Good Morning folks,
thanks so far... hm... google's english is even worse... ;)
I mean the images in default c5 content blocks. Other blocks work fine, but I need lightbox for pics in the text.
I even would buy an addon, but first of all want to learn how this could work before I throw coins on you :)
Still trying,
Stefan
Use jQuery:
In your template add in HEAD section, before </head>:
Put in to your theme folder on FTP files from attachment: js, css and images folder.
Edit lightbox.js and write your correct path (/themes/YOURTHEME/...)
In your text in content you can edit image or link and add the class them eg:
<a class="yourclassname" href=....
That's all!
You have lightbox in content without additional Add-ons.
In your template add in HEAD section, before </head>:
<script type="text/javascript" src="/themes/YOURTHEME/lightbox.js"></script> <link rel="stylesheet" type="text/css" href="/themes/YOURTHEME/lightbox.css" media="screen" /> <script type="text/javascript"> $(function() { $('.yourclassname').lightBox(); }); </script>
Put in to your theme folder on FTP files from attachment: js, css and images folder.
Edit lightbox.js and write your correct path (/themes/YOURTHEME/...)
In your text in content you can edit image or link and add the class them eg:
<a class="yourclassname" href=....
That's all!
You have lightbox in content without additional Add-ons.
Thank you cssninja,
for you answer! I´ll try this out as soon as I have time to do so!
Greetings,
Stefan
for you answer! I´ll try this out as soon as I have time to do so!
Greetings,
Stefan
Hello,
Thanks, your solution is the best.
Madelyn :-)
Thanks, your solution is the best.
Madelyn :-)
Hi, I think this might be exactly what I have been looking for, but do not completely understand how to do this. Is there a more step by step description somewhere that I can follow?
Thanks!
-Chris
Thanks!
-Chris
cssninja's solution seems to be exactly what I am looking for, however, I could not completely follow exactly how to implement this.
Basically, we have a completed site with images in place and just wanted a way to add higher resolution photos to load via a lightbox effect by somehow adding the lightbox functionality site wide and just linking the higher quality images to the ones we already have in place.
What is being talked about here seems like a good fit for that assuming I am understanding things correctly, I was just wondering if someone could give me a little more of a step by step instruction on how to put this into action.
Thanks,
-Chris
Basically, we have a completed site with images in place and just wanted a way to add higher resolution photos to load via a lightbox effect by somehow adding the lightbox functionality site wide and just linking the higher quality images to the ones we already have in place.
What is being talked about here seems like a good fit for that assuming I am understanding things correctly, I was just wondering if someone could give me a little more of a step by step instruction on how to put this into action.
Thanks,
-Chris
Here comes the more stepish guide - not mention to anyone that this is with-a-almost-two-year delay ;) - but maybe i will help someone else ;)
Here's what I did.
1 :: Make a nice CSS style in typography.css
typography.css must be placed in your theme root folder!
This is how I styled all inserted images in the content block.
2 :: Insert an image
Insert an image, click on it (select it) and click on the "Styles" drop-down menu and select the above style. The style get applied to the p tag.
3 :: copy the image url
Select the image and click on the "insert/Edit image" icon on the toolbar. Copy the image url. Should be something like this: /index.php/download_file/view_inline/40/
4 :: make a link
With the image selected click on the "Insert/Edit Link" icon on the toolbar and paste the url in the "Link URL" input.
Save the block and publish the page.
Repeat above steps for all the images you need to be lightboxed.
In my case I used "prettyPhoto" -http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lig...
5 :: setup prettyPhoto
Now the following lines will describe how I setup the Thing .. it all depends on where you put the prettyPhoto plugin files.
Copy "jquery.prettyPhoto.js" in "your_theme_path/js/vendor/".
Copy "prettyPhoto.css" in "your_theme_path/css/"
Copy "prettyPhoto" folder in "your_theme_path/img/"
Edit the "prettyPhoto.css" file everywhere where a reference to an image from the "prettyPhoto" folder is made.
insert this line after jQuery is loaded:
Insert this JS code after plugin is loaded:
And this is pretty much all I did. Hope that this will help someone!
Bye
Here's what I did.
1 :: Make a nice CSS style in typography.css
typography.css must be placed in your theme root folder!
.content_img { text-align: center; } .content_img img { width: 80%; height: auto; padding: 5px; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 0 2px 1px #ccc; }
This is how I styled all inserted images in the content block.
2 :: Insert an image
Insert an image, click on it (select it) and click on the "Styles" drop-down menu and select the above style. The style get applied to the p tag.
3 :: copy the image url
Select the image and click on the "insert/Edit image" icon on the toolbar. Copy the image url. Should be something like this: /index.php/download_file/view_inline/40/
4 :: make a link
With the image selected click on the "Insert/Edit Link" icon on the toolbar and paste the url in the "Link URL" input.
Save the block and publish the page.
Repeat above steps for all the images you need to be lightboxed.
In my case I used "prettyPhoto" -http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lig...
5 :: setup prettyPhoto
Now the following lines will describe how I setup the Thing .. it all depends on where you put the prettyPhoto plugin files.
Copy "jquery.prettyPhoto.js" in "your_theme_path/js/vendor/".
Copy "prettyPhoto.css" in "your_theme_path/css/"
Copy "prettyPhoto" folder in "your_theme_path/img/"
Edit the "prettyPhoto.css" file everywhere where a reference to an image from the "prettyPhoto" folder is made.
insert this line after jQuery is loaded:
<script src="<?php echo $this->getThemePath()?>/js/vendor/jquery.prettyPhoto.js" type="text/javascript"></script>
Insert this JS code after plugin is loaded:
$(document).ready(function(){ $(".content_img a").prettyPhoto({ animation_speed: 'normal', /* fast/slow/normal */ opacity: 0.80, /* Value between 0 and 1 */ ie6_fallback: false, social_tools: false }); });
And this is pretty much all I did. Hope that this will help someone!
Bye
Forget to link the css file :D
put this line in your <head></head> section:
put this line in your <head></head> section:
<link rel="stylesheet" href="<?php echo $this->getThemePath()?>/css/prettyPhoto.css" />
There are some lightbox derivates in the Marketplace, you can buy one of them if you want.
http://www.concrete5.org/marketplace/addons?sort=popular&search...
Wenn du Zeit hast kannst du auch selbst so etwas programmieren, aber ich denke das Einfachste wäre etwas fertiges zu kaufen. In ein paar Wochen bringe ich auch etwas derartiges raus, eine Basic Version wird kostenlos angeboten ;) (habe grade klausurphase :( musst dich also gedulden, bzw. du kaufst eines der angebotenen Addons.)
Grüße/Greets
Fernandos