Lightbox into joomla??

Discuss the integration of Joomla! with other products. ie SMF, phpbb etc etc

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
baggiesmad
Joomla! Explorer
Joomla! Explorer
Posts: 416
Joined: Tue Feb 21, 2006 11:10 am

Lightbox into joomla??

Postby baggiesmad » Mon Nov 06, 2006 11:04 am

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Dec 21, 2006 10:39 pm

Re: Lightbox into joomla??

Postby sbernst » Thu Dec 21, 2006 10:59 pm

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

User avatar
Ly_Designer
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 120
Joined: Tue Mar 14, 2006 2:46 pm
Location: Tripoli-Libya
Contact:

Re: Lightbox into joomla??

Postby Ly_Designer » Fri Dec 22, 2006 3:11 am

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.

     
     
     

 
2. Copy the lightbox.css file to your template css folder, then include the link in your template header



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!

User avatar
JonS
Joomla! Intern
Joomla! Intern
Posts: 89
Joined: Sat Aug 19, 2006 1:29 am
Location: Indiana

Re: Lightbox into joomla??

Postby JonS » Thu Dec 28, 2006 1:41 am

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
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: Lightbox into joomla??

Postby AmyStephen » Fri Dec 29, 2006 1:19 pm

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.
Last edited by AmyStephen on Fri Dec 29, 2006 1:21 pm, edited 1 time in total.

AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: Lightbox into joomla??

Postby AmyStephen » Fri Dec 29, 2006 1:26 pm

@SBernst -

sbernst wrote: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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Jan 23, 2008 12:33 am

Re: Lightbox into joomla??

Postby Cybril » Wed Jan 23, 2008 12:35 am

Hello,

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

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

dugong
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Jan 03, 2011 12:10 am

Re: Lightbox into joomla??

Postby dugong » Mon Jan 03, 2011 12:15 am

@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
Joomla! Intern
Joomla! Intern
Posts: 98
Joined: Mon May 11, 2009 3:00 am
Contact:

Re: Lightbox into joomla??

Postby citydan » Fri Jun 17, 2011 5:21 pm

dugong wrote:@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.
Landscape Architecture Resource
everything useful for landscape architects
http://landscapearchitectureresource.com
jobs | schools | materials | news | firms | lare


Return to “Integration & Bridges - 1.0.x”

Who is online

Users browsing this forum: No registered users and 3 guests