Skip navigation
Currently Being Moderated

How do I make a jquery lightbox image pop up from text link?

Sep 13, 2012 9:31 AM

Tags: #cs5 #jquery #link #images #css #dw

Hello, I'm trying to make a picture pop up in a new window as a result of clicking a text link. The site I'm working on can be found at www.glovesanddoves.com. There's a link on the News page that says 'Shot Circuit' on the right in the middle. Currently if you click it you get a standard pop up displaying the image that doesn't look too good. I'd really like the jquery lightbox type of animated pop up that dims the page behind and centres it also. Any help or point in the right direction to the relevant tutorial would be appreciated. By the way, I'm not a coder and rely on Dreamweaver so I really do need an idiots guide by the numbers type approach.

 

Thanks

 

Jack

 
Replies
  • Currently Being Moderated
    Sep 13, 2012 9:40 AM   in reply to Quadzilla_1111

    Have you tried adding the lightbox to it?

     

    When the lightbox tutorial tells you to add a link around an image, just add the same link around some text instead.

     

    http://lokeshdhakar.com/projects/lightbox2/

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 12:46 PM   in reply to Quadzilla_1111

    Ah, OK. Maybe a translation from geek to regular Joe?

     

    Part 1 - Setup

     

    That first block of code needs to be added between the <head> and </head> tags in the source. Then you need to put the files those links reference (jquery-1.7.2.min.js and lightbox.js) into a folder called "js" (no quotes) that sits in your site at the same level as the index.html page.

     

    The lightbox.css link also goes between the <head></head> tags and the file lightbox.css goes in a folderr called "css" (no quotes) that will sit at the same level as your index.html page.

     

    The remaining info about the images is asking you to go into the .css file to ensure that the links there, pointing to those 5 files, are pointing in the right place. If you have a folder called "images" already (again, on the same level as the index.html) go ahead and move the referenced images into it, otherwise, create the folder and add the images. If all of the folders are in the right spot, the links should look like this...

     

    ../images/prev.png and ../js/lightbox.js

     

    Part 2 - Activate

     

    This part is pretty literal, there isn't much I can say that will make it easier. You need to create a link with the URL going to your "big image". You can do that in DW by highlighting the text and adding the path to the image you want to display in the "Link" field of the Property Inspector. Once it has been added, you need to go into the source view and add that bit about rel="lightbox" as they show.

     

    When all is said and done, you should preview in the browser to make sure it works. If it doesn't, you can upload your site to a test location and I can look for any errors for you.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 1:19 PM   in reply to Quadzilla_1111

    It's likely something very small. If you could post a link to what you have, I'm sure we could find the issue pretty quickly.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 2:01 PM   in reply to Quadzilla_1111

    For quick answers to layout questions, get some free, temporary hosting for testing and debugging purposes.   Many ISPs offer a free web space you could use.  Or look at this site:

    http://www.000webhost.com/

     

    Upload your page and support files to your web server space and post your URL in the web forum. 

     

    I for one don't have time to download people's work files and reconstruct the site in DW.  I have my own projects to work on.  If you provide a link we can see in our browsers, it takes 1 minute to check your site and come back with a solution. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2012 2:07 PM   in reply to Quadzilla_1111

    Quadzilla_1111 wrote:

     

    Hello, The only way I can do it right now is to share the source files with you via drop box but I'll need an email address in order to invite you to share. The page I'm using is News_1.htm. The JS,CSS and images folders are in the HTML folder which is where the News_1.htm file is. The text link that I would like to use to open the new lightbox window is on the right of the page in the middle called 'Shot Circuit.' The text link has the Shot Circuit Poster jpeg image set as a link already. The JPEG image is in the Images folder on the same level as the HTML folder. Hope that helps.Jack

     

     

    I have to agree with Nancy here. If you have access to the FTP for your site, you could create a folder called "test" that you can upload your files to on your domain at www.glovesanddoves.com.

     

    The link would then end up being www.glovesanddoves.com/test/News_1.htm

     

    It won't take much to find your issue, so you can delete the folder before any search bots find it.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points