Lightbox into joomla??

[baggiesmad]

can anyone help me get the lighbox javascript working with my site?

This is the step-by-step guide off the site.

But not too sure how to get it working within joomla

Code: Select all

How to Use:
Part 1 - Setup

   1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

      <script type="text/javascript" src="js/prototype.js"></script>
      <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
      <script type="text/javascript" src="js/lightbox.js"></script>

   2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

      <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

   3. Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

   1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

      <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

      Optional: Use the title attribute if you want to show a caption.
   2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

      <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
      <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
      <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

      No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

[sbernst]

It's possible that using phpMyAdmin will allow to you use this code..

Please consider the following after you've entered your directory information into the lightbox config file and have saved your changes.

1. Login to Joomla's Admin interface

2. click on Modules from the menu bar

3. Click to create a new module

4. give it a name like 'lightbox' and save the new module.

5. log out of the admin interface

6. log into your phpMyAdmin interface.

7. Now browse to the database key for the module... it should be something like jos_modules

8. Click the pencil icon to edit the contents of the 'lightbox' module entry

9. Now copy and paste the code for Lightbox into the text window of phpMyAdmin.

10.  Save the changes and log out of phpMyAdmin.

You should now be able to log back into the Joomla Admin interface and place the Lightbox Module where you wish.  This same method worked with embedding a quicktime movie onto the main page of our congregation's website.

Hope this helps.

Steven

[Ly_Designer]

Here is the answers :

Part 1 - Setup

1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library.
  You have to create a new folder named (js) at your template directory. then you need to include these three Javascript files in the   header of your template.

      /templates/your_template_name/js/prototype.js">
      /templates/your_template_name/js/scriptaculous.js?load=effects">
      /templates/your_template_name/js/lightbox.js">
 
2. Copy the lightbox.css file to your template css folder, then include the link in your template header

/templates/your_template_name/css/lightbox.css" type="text/css" media="screen" />

Part 2 - Activate

The trick for activating it :
Go to your joomla site global configuration >> Default WYSIWYG Editor >> Set it to NO WYSIWYG Editor.
then go to your content and insert the image link including the rel="lightbox" attribute and then go back to the Global Configuration    and reactivate the WYSIWYG Editior

1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

      image #1

      Optional: Use the title attribute if you want to show a caption.
 
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square  brackets in the rel attribute. For example:

      image #1
      image #2
      image #3

      No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

[JonS]

Thanks for the instructions Ly_Designer

Problem is, I have followed them, but cannot seem to get the lightbox to work.

I am using it in a imagemap, and the link is working, but it just opens the photo in the window (no lightbox)

JS is installed in JS dir in template dir, scripts are copied as shown (with template name inserted), spelling has been checked.

Does anyone (or Ly_Designer ) have an idea?

(on another site, i have installed easygallery, and this works great, but, it does not seem to beable to work for imagemaps)

Thanks for any help!

[AmyStephen]

Have you considered using one of the options already available on the Extensions Directory for this?

"Simple Image Gallery" from JoomlaWorks is very good - and they are very responsive to the community.

http://extensions.joomla.org/component/ ... Itemid,35/

Good luck!
Amy

Edit - just noticed this --> "I'm still kind of new, so please be nice! " ... made me chuckle! I hope people are always nice to you, even when you are an old timer in these parts!  ... Take care.

[AmyStephen]

@SBernst -

It's possible that using phpMyAdmin will allow to you use this code..

I think I understand what problem you are trying to solve. When you use the WYSIWYG editors, your HTML tags are getting "stripped?" So, you are very creatively using phpMyAdmin as an editor?

What you can do is go into the User Manager for the User you are logged on with and select "No WYSIWYG" for the editor. Then, you can paste your code into a custom module or a content item without impacting the HTML. Then, you can switch it back to work with "real writing" again.

Best regards!
Amy

[Cybril]

Hello,

This guy has a fix/script which I've used and is great.

http://design.markcallf.co.uk/VirtueMar ... -id-1.html

[dugong]

@AmyStephen

i got the same problem. i've tried to enable the editor but it still didn't work. when i click the image a new page opens up but not the lightbox.

[citydan]

@AmyStephen

i got the same problem. i've tried to enable the editor but it still didn't work. when i click the image a new page opens up but not the lightbox.

Perhaps the text editor you are using in Joomla is stripping out the tags? If you right-click on the image in your website using Chrome or FireFox's FireBug extension and click "inspect element" you should be able to see the source code for your image and any tags and elements that it has.

If you are using JCE Editor you'll be able to configure the user group settings to NOT strip off html or js tags from your content in the text editor.