Content Preview (lightbox) Function

wildorchid · **Joined:** Sun Feb 18, 2007 9:11 am **Posts:** 14

I love the way Joomla 1.5 displays the content preview in the lightbox.

My question is if I can use this function also on the frontpage instead of normal popup window for example to show a larger image when clicking on a thumbnail included in the page content.

I noticed that there are some extensions for Joomla 1.xx but if Joomla 1.5 has this possibility natively included maybe there is a way to make use of it on the frontpage too?

Anyone has accomplished this or knows where to look?

Thanks for your help.

AMCAD · **Joined:** Thu Jun 07, 2007 2:16 pm **Posts:** 78

wildorchid wrote:

I love the way Joomla 1.5 displays the content preview in the lightbox.

My question is if I can use this function also on the frontpage instead of normal popup window for example to show a larger image when clicking on a thumbnail included in the page content.

I noticed that there are some extensions for Joomla 1.xx but if Joomla 1.5 has this possibility natively included maybe there is a way to make use of it on the frontpage too?

Anyone has accomplished this or knows where to look?

Thanks for your help.

Hey wildorchid,
I went to the actual Lightbox2 site (http://www.huddletogether.com/projects/lightbox2/) and got the code from there. I downloaded the files and followed everything step-by-step. Put the links to the different JavaScript files directly into your index.php (i put them at the end of the Head section).

This will enable all pictures to be viewed in lightbox as long as you link the thumbnail to a larger picture and put

Code:

<rel="lightbox">

in your tag. So like

Code:

Good luck!

wildorchid · **Joined:** Sun Feb 18, 2007 9:11 am **Posts:** 14

AMCAD wrote:

Hey wildorchid,
I went to the actual Lightbox2 site (http://www.huddletogether.com/projects/lightbox2/) and got the code from there. I downloaded the files and followed everything step-by-step. Put the links to the different JavaScript files directly into your index.php (i put them at the end of the Head section).

This will enable all pictures to be viewed in lightbox as long as you link the thumbnail to a larger picture and put

Code:

<rel="lightbox">

in your tag. So like

Code:

Good luck!

Hi AMCAD,

I believe you that this works however my question was if this can be accomplished with the already built in function from Joomla 1.5. If you look at in the admin section where you add or edit content there is a preview button which creates a lightbox preview page.

Do you know what I mean? If a native Joomla 1.5 function can be used to do this it is better than having to hack the system with an external script because of future upgrades to the site.

I think they do it with the mootools.js which is now a part of Joomla 1.5.

I found the following called Slimbox http://www.digitalia.be/software/slimbox#downloadwhich is also using the mootools.js. It is similar to the Lightbox but makes use of native mootols.

Any other idea?

wildorchid · **Joined:** Sun Feb 18, 2007 9:11 am **Posts:** 14

I believe the functions for generating lightbox/squeezbox are in the modal.js and make use of mootools. However I don't know how to use them.

Anybody can help?

Thanks

wildorchid · **Joined:** Sun Feb 18, 2007 9:11 am **Posts:** 14

wildorchid wrote:

I love the way Joomla 1.5 displays the content preview in the lightbox.

My question is if I can use this function also on the frontpage instead of normal popup window for example to show a larger image when clicking on a thumbnail included in the page content.

I noticed that there are some extensions for Joomla 1.xx but if Joomla 1.5 has this possibility natively included maybe there is a way to make use of it on the frontpage too?

Anyone has accomplished this or knows where to look?

Thanks for your help.

I finally was able to use the Joomla 1.5 native Lightbox which is called the SueezeBox on the frontpage to display images and also external HTML in an iframe Lightbox.

You need to include media/js/modal.js and media/js/modal.css into the header tags in the index.php of your template.

Code:

Code:

link rel="stylesheet" href="media/system/css/modal.css" type="text/css" />

Next you need to include the following little Javascript to initiate the SqueezeBox:

Code:

<script type="text/javascript">
    // <!--

      window.addEvent('domready', function() {

         SqueezeBox.initialize({});

         $$('a.modal').each(function(el) {
            el.addEvent('click', function(e) {
               new Event(e).stop();
               SqueezeBox.fromElement(el);
            });
         });
      });
    // -->
  </script>

Finally to call this Squeezebox for an image use:

Code:

<a [color=red]rel="SqueezeBox"[/color] href="yourimagefolder/yourimage.jpg" title="Your Image Title" [color=red]class="modal"[/color]><img src="yourimagefolder/yourthumbimage.jpg" alt="Imagename" title="Your Image Title"  </a>

To call an HTML page into an iframe use:

Code:

<a rel="{handler: 'iframe', size: {x: 800, y: 600}}" href="http://www.domain.com/page.html" class="modal">Testlink</a>

No guarantee that above is 100% correct but it works for me. However if only images need to be displayed in a Lightbox I prefer the script Slimbox from http://www.digitalia.be. Both Modal and Slimbox seem to be Lightbox2 clones but Slimbox is a smaller and very fast loading Lightbox script that shows the caption of the image plus has additional functionality to display image groups with next-previous buttons. Both make use of the Mootools Framework.

Cheers

AMCAD · **Joined:** Thu Jun 07, 2007 2:16 pm **Posts:** 78

wildorchid wrote:

I love the way Joomla 1.5 displays the content preview in the lightbox.

My question is if I can use this function also on the frontpage instead of normal popup window for example to show a larger image when clicking on a thumbnail included in the page content.

I noticed that there are some extensions for Joomla 1.xx but if Joomla 1.5 has this possibility natively included maybe there is a way to make use of it on the frontpage too?

Anyone has accomplished this or knows where to look?

Thanks for your help.

I finally was able to use the Joomla 1.5 native Lightbox which is called the SueezeBox on the frontpage to display images and also external HTML in an iframe Lightbox.

You need to include media/js/modal.js and media/js/modal.css into the header tags in the index.php of your template.

Code:

Code:

link rel="stylesheet" href="media/system/css/modal.css" type="text/css" />

Next you need to include the following little Javascript to initiate the SqueezeBox:

Code:

<script type="text/javascript">
    // <!--

      window.addEvent('domready', function() {

         SqueezeBox.initialize({});

         $$('a.modal').each(function(el) {
            el.addEvent('click', function(e) {
               new Event(e).stop();
               SqueezeBox.fromElement(el);
            });
         });
      });
    // -->
  </script>

Finally to call this Squeezebox for an image use:

Code:

<a [color=red]rel="SqueezeBox"[/color] href="yourimagefolder/yourimage.jpg" title="Your Image Title" [color=red]class="modal"[/color]><img src="yourimagefolder/yourthumbimage.jpg" alt="Imagename" title="Your Image Title"  </a>

To call an HTML page into an iframe use:

Code:

<a rel="{handler: 'iframe', size: {x: 800, y: 600}}" href="http://www.domain.com/page.html" class="modal">Testlink</a>

No guarantee that above is 100% correct but it works for me. However if only images need to be displayed in a Lightbox I prefer the script Slimbox from http://www.digitalia.be. Both Modal and Slimbox seem to be Lightbox2 clones but Slimbox is a smaller and very fast loading Lightbox script that shows the caption of the image plus has additional functionality to display image groups with next-previous buttons. Both make use of the Mootools Framework.

Cheers

Can you post a link to your site so I can see how this works? I tried it (not for the frontpage, however) and can't get it to work.

Thanks. Good job on getting it to work.

wildorchid · **Joined:** Sun Feb 18, 2007 9:11 am **Posts:** 14

Can you post a link to your site so I can see how this works? I tried it (not for the frontpage, however) and can't get it to work.

Thanks. Good job on getting it to work.
[/quote]

Sorry my producation server is not online for public viewing.

However I think I know why it doesn't work for you. I forgot to metnion that of course you also have to link the mootools.js to your frontpage. Without mootools none of the lightbox scripts work. In my case I did not have to do this because my menu component already includeds the mootools into the frontpage...

Please add the following inside the tags to your template index.php:

Code:

<script type="text/javascript" src="media/system/js/mootools.js"></script>
<script type="text/javascript" src="media/system/js/modal.js"></script>
<link rel="stylesheet" href="media/system/css/modal.css" type="text/css" />

<script type="text/javascript">
    // <!--

      window.addEvent('domready', function() {

         SqueezeBox.initialize({});

         $$('a.modal').each(function(el) {
            el.addEvent('click', function(e) {
               new Event(e).stop();
               SqueezeBox.fromElement(el);
            });
         });
      });
    // -->
  </script>

To call the squeezbox/lightbox use the following in Link:

Code:

 <a rel="SqueezeBox" href="yourimagefolder/yourimage.jpg" title="Your Image Title" class="modal"><img src="yourimagefolder/yourthumbimage.jpg" alt="Imagename" title="Your Image Title"  </a>

To open anything else than an picture e.g. a full HTML page you need to call an iframe window like this:

Code:

<a rel="{handler: 'iframe', size: {x: 800, y: 600}}" href="http://www.domain.com/page.html" class="modal">Testlink</a>

I hope now you can get it to work.
Cheers

glimpse79 · **Joined:** Wed Aug 08, 2007 10:12 am **Posts:** 4

Have you tried to use two lightbox preview images in the same page? always open the first one...

wildorchid wrote:

Can you post a link to your site so I can see how this works? I tried it (not for the frontpage, however) and can't get it to work.

Thanks. Good job on getting it to work.

Sorry my producation server is not online for public viewing.

However I think I know why it doesn't work for you. I forgot to metnion that of course you also have to link the mootools.js to your frontpage. Without mootools none of the lightbox scripts work. In my case I did not have to do this because my menu component already includeds the mootools into the frontpage...

Please add the following inside the tags to your template index.php:

Code:

<script type="text/javascript" src="media/system/js/mootools.js"></script>
<script type="text/javascript" src="media/system/js/modal.js"></script>
<link rel="stylesheet" href="media/system/css/modal.css" type="text/css" />

<script type="text/javascript">
    // <!--

      window.addEvent('domready', function() {

         SqueezeBox.initialize({});

         $$('a.modal').each(function(el) {
            el.addEvent('click', function(e) {
               new Event(e).stop();
               SqueezeBox.fromElement(el);
            });
         });
      });
    // -->
  </script>

To call the squeezbox/lightbox use the following in Link:

Code:

 <a rel="SqueezeBox" href="yourimagefolder/yourimage.jpg" title="Your Image Title" class="modal"><img src="yourimagefolder/yourthumbimage.jpg" alt="Imagename" title="Your Image Title"  </a>

To open anything else than an picture e.g. a full HTML page you need to call an iframe window like this:

Code:

<a rel="{handler: 'iframe', size: {x: 800, y: 600}}" href="http://www.domain.com/page.html" class="modal">Testlink</a>

I hope now you can get it to work.
Cheers
[/quote]

AMCAD · **Joined:** Thu Jun 07, 2007 2:16 pm **Posts:** 78

Now it's telling me "Squeezebox not defined in mootools.js on line 76"

What the heck? I did exactly as you told me. I must be missing something...

Help? $:-\$

wildorchid · **Joined:** Sun Feb 18, 2007 9:11 am **Posts:** 14

AMCAD wrote:

Now it's telling me "Squeezebox not defined in mootools.js on line 76"

What the heck? I did exactly as you told me. I must be missing something...

Help? :-\

Did you write SqueezeBox or Squeezebox? This is case sensitive.

Best thing to do is go to the Joomla 1.5RC admin and open a new blan conten page. Right click and view source code. search the source code for the word class="modal" which will bring you to the line that has the SqueezeBox link.

By the way if you use the WYSIWYG editor be aware that even if you write the correct tag in the HTML view when saving the file the tag will be destroyed. This seems to work only with the deactivated WYSIWYG editor.

Else maybe you PM me your login to your Joomla admin and I try to take a look.
Regards

AMCAD · **Joined:** Thu Jun 07, 2007 2:16 pm **Posts:** 78

Got it!

Here's what I had to do:

Code:

<script type="text/javascript" src="../includes/js/joomla.javascript.js"></script>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/system/js/modal.js"></script>
  <script type="text/javascript">
    // <!--
      window.addEvent('domready', function(){ var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: 'false'}); });
    // -->
  </script>
  <script type="text/javascript">
    // <!--

      window.addEvent('domready', function() {

         SqueezeBox.initialize({});

         $$('a.modal').each(function(el) {
            el.addEvent('click', function(e) {
               new Event(e).stop();
               SqueezeBox.fromElement(el);
            });
         });
      });
    // -->
 </script>
 <link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />

That goes in the Head of your template index.php
Make sure they are in that order. I accidentally had the stylesheet above the JS scripts and it screwed my whole site.

That's it! Super easy once you understand it. Hopefully my hours of trouble will help someone do it in 5 minutes!

wildorchid · **Joined:** Sun Feb 18, 2007 9:11 am **Posts:** 14

AMCAD,

Glad that this is working for you but please note that I have it the other way around. The native Joomla integration in the administrator part is also the other way around which works fine.

Checking the source code on the website of the original SqueezeBox script by Harald Kirschner http://digitarald.de/playground/squeeze.html it is also the other way around.

Anyway if it works for you this is what counts.

55thinking · **Posted:** Wed Aug 22, 2007 10:44 am

I had it working with the initial code of wildorchid.

Now i have a question: how to group several images as in slimbox. I can't see how to do that with SqueezeBox/Modal

Thanks for your help

wildorchid · **Joined:** Sun Feb 18, 2007 9:11 am **Posts:** 14

55thinking wrote:

I had it working with the initial code of wildorchid.

Now i have a question: how to group several images as in slimbox. I can't see how to do that with SqueezeBox/Modal

Thanks for your help

Hi 55thinking,
Don't know if this is possible. You can check the coder's website http://digitarald.de/playground/squeeze.html. He has a sample on his website but it doesn't seem to work. If you look at the source code of his website and search for the word "SmoothGallery" you will find a function and a link how to open the SqueezeBox with a gallery included. I'm not sure if you will have to add another JS script for the gallery to work.

Good luck and let us know if you got it to work.

wildorchid · **Joined:** Sun Feb 18, 2007 9:11 am **Posts:** 14

Today I found a new script called Mediabox. This one is very promising. It includes the core of Slimbox 1.4 (also using Mootools 1.1.) plus adds multimedia functionality. It adds the possibility to include external websites, AJAX content, Flash animations and movie formats.

Unfortunately it is still buggy. The current version goes on playing the movie audio when closing the Slimbox if using IE7. Under MAC this bug appears in Firefox.

Mediabox by John Einselen: http://iaian7.com/webcode/Mediabox

If the developer can find a way to get rid of the bugs this script will blow away all the others.

theaer · **Joined:** Mon Nov 05, 2007 5:15 am **Posts:** 37

Greetings all,

No need to start a new topic so I thought I'd revive this for a little monkey wrench.

I'm attempting to use the squeezebox with the component 'contacts'. I can't figure out where to put the scripts and whatnot, however.

Any suggestions?

BTW: It works on the site, just not in the component.

Second question: Is there a way to make a menu item, when clicked, directly open up the squeezebox?

mininott · **Joined:** Fri Oct 06, 2006 8:40 am **Posts:** 8

Hi everyone!

I am currently using this sollution to add squeezebox popups to my site, but have two problems:

1) On pages with several images with pop-ups, clikcing any of them will display the same image in all squeezeboxes, the first one being pushed
2) The squeezebox script makes the "readmore" link disappear

Any have the same problem / a sollution?

- adrian

Joomla! Discussion Forums

Forum rules

Content Preview (lightbox) Function

Quick reply

Who is online