Skip navigation
GhostFrappe
GhostFrappe Calculating status...
Currently Being Moderated

Trouble with lightbox

Mar 8, 2013 12:32 PM

Tags: #html #dreamweaver #javascript #code #lightbox

I've been trying to get a lightbox to work in Dreamweaver and it's just not working right. I'm sure I'm doing something wrong. I do have the Lightbox Advancer application for DW so I don't have to putz around with scripting, but the thing is it won't let me add more than 11 new items. What I'd like to make is lightboxes for an image gallery where a thumbnail of each image is visible. I don't know if that means I need to add a new item for every image or not. When I preview the HTML file, most of them pop up like they should, but when I attempt to move to the previous or next image, it stays stuck at the loading screen.

 

I try to use the site URLs for the image source files, but I notice that for each item, there are two images: the web URL and the image in the /Application Data/Adobe/Dreamweaver 9/Configuration/ServerConnections/mydomain folder. The ones with just a web URL are the ones that won't load. And I have tested the images - everything loads up just fine when I access a file directly like mydomain.com/images/photo1.jpg. But when I set that same address as the source for the image in the lightbox, it doesn't show up.

 

This is what I'm seeing in the Lightbox screen. Sorry about the dots everywhere - my graphics card is all screwy.

 

screen1.JPG

 

I don't know what I'm doing wrong and why the URLs don't show up. Also, even if it began working properly, how to I get it to work online? Do I import the images and thumbnails from the /Application Data/Adobe/Dreamweaver 9/Configuration/ServerConnections/mydomain location to the FTP server? If the current URLs won't work, how will this thing be able to actually work on a live site?

 

I apologize if this all sounds ridiculous. I know some very basic HTML and this is my first time using a lightbox and an FTP server, and I know if even one little period or slash is out of place, the whole thing goes kaput. Web design is very much not one of my strengths.

629 Views   10 Replies   Latest reply: GhostFrappe, Mar 10, 2013 7:35 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Mar 8, 2013 12:35 PM   in reply to GhostFrappe
    Report

    Lightbox Advancer Application?  Never heard of it. Never used it.  For help with 3rd party Extensions, refer to your extension's documentation or contact the developer.

     

    I use a jQuery plug-in called Fancybox.  Very simple to deploy and easy to insert images directly into your HTML markup.

     

    Primer for using jQuery plugins

    http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.h tml

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    2. John Waller,
    Mar 8, 2013 12:44 PM   in reply to GhostFrappe
    Report

    I've never heard of or used Lightbox Advancer either.

     

    Have you tried contacting their support?

    http://lightboxadvancer.com/support.php

     

    Lightbox Advancer looks a little long in the tooth given their references to older software versions for compatibility. Have their products been updated since 2010?

     
    |
    Mark as:
  • GhostFrappe
    Currently Being Moderated
    3. GhostFrappe,
    Mar 8, 2013 1:20 PM   in reply to John Waller
    Report

    Thank you so much for the fast response! I did just shoot an email off to them a bit ago. I have no idea if compatability is an issue - I'm using Dreamweaver CS3 right now. Their home page mentions the extension is compatible with CS5, so I wonder if it could be conflicting with my older version of DW?

     

    In regard to Javascript, everything I've read says to copy and paste an exact code into the <head>section of the coding, but I don't know if it needs to be in a specific location or just wherever. I have the following code right above the </head> tag in my HTML code:

    <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><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <a href="images/yourfirstimage.jpg" rel="lightbox" title="put your caption here">image name goes here</a>

    <link rel="stylesheet" href="../../Application Data/Adobe/Dreamweaver 9/Configuration/ServerConnections/bentcupcakes/cssmenutools/scripts/M TLB.css" type="text/css"/>

    <script src="../../Application Data/Adobe/Dreamweaver 9/Configuration/ServerConnections/bentcupcakes/cssmenutools/scripts/M TLB.js" type="text/javascript"><!-- MTLB_eUOSVVA --></script>

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Mar 8, 2013 1:26 PM   in reply to GhostFrappe
    Report

    Images and links must go inside the <body> tags of your document.

     

    <a href="images/yourfirstimage.jpg" rel="lightbox" title="put your caption here">image name goes here</a>

     

    Links to style sheets and scripts must go inside the <head> tags of your document.

     

    <link rel="stylesheet" href="../../Application Data/Adobe/Dreamweaver 9/Configuration/ServerConnections/bentcupcakes/cssmenutools/scripts/M TLB.css" type="text/css"/>

     

    <script src="../../Application Data/Adobe/Dreamweaver 9/Configuration/ServerConnections/bentcupcakes/cssmenutools/scripts/M TLB.js" type="text/javascript"><!-- MTLB_eUOSVVA --></script>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • GhostFrappe
    Currently Being Moderated
    5. GhostFrappe,
    Mar 8, 2013 8:32 PM   in reply to Nancy O.
    Report

    Thank you for the help, Nancy O. I have to assume that I need to make a Javascript page in order for this to work (the original page was just HTML). However, when I make a new Javascript document in DW, I only have access to the Code window. I cannot see the design or the split screen, nor can I preview the page in Firefox. Javascript is enabled on my computer, though it may need to be updated. Could this be causing some of the trouble?

     

    I think I need to read more about Javascript before I put in any codes because I've never used it for web building - I've only ever used HTML.

     
    |
    Mark as:
  • GhostFrappe
    Currently Being Moderated
    6. GhostFrappe,
    Mar 8, 2013 10:06 PM   in reply to GhostFrappe
    Report

    Fancybox confounded the heck out of me (I am definitely not a coder, if it wasn't alreayd obvious). I tried Lightbox 2 since the instructions look relatively simple. I just tried using the example files in the ZIP to see if I could set everything up right. I've got the floating window popping up (no thumbnail view, though), but I'm just not sure how to switch images in the same box like the example on the site.

     

    This is the coding I have going on:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <script src="js/jquery-1.7.2.min.js"></script>

    <script src="js/lightbox.js"></script>

    <link href="css/lightbox.css" rel="stylesheet" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Light box test</title>

    </head>

     

    <body>

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

    </body>

    </html>

     

    I thought I followed the instructions exactly, but obviously I didn't since it's not working properly. How do I get it to switch from one image to the next (or previous)? I see the "next" and "prev" GIFs, but I don't know where they're supposed to go. Also, how do I get the thumbnail view? Right now I have a link rather than an image.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    7. Nancy O.,
    Mar 9, 2013 10:36 AM   in reply to GhostFrappe
    Report

    Javascript is nothing but code so there's nothing to see in Design View.

     

    Below is a working example of Fancybox gallery.  View source in browser to see the code

     

    From Primer on using JQuery Plugins:

     

    jQuery has 3 basic parts to it:   

      1. the core code library which you ref in your <head> tags,
      2. the plug-in scripts & CSS files (if any) which you ref in your <head> tags,
      3. the function code inside <script> tags to invoke the plug-in. 

     

    Inside your HTML <body> tag will be a division such as "slideshow" which tells the scripts where to find your images.

     

    For any more help, you'll need to upload your page and supporting files to a public web space you control (your remote server) and post the URL here.

     

     

    Nancy O.

     
    |
    Mark as:
  • GhostFrappe
    Currently Being Moderated
    8. GhostFrappe,
    Mar 9, 2013 8:47 PM   in reply to Nancy O.
    Report

    Thanks again for your help, Nancy O. I got the pop up thing to work and now my only issue is the arrows won't show up to let me move to the next or previous image within the lightbox. I'm also asking folks about it on the Lightbox forums.

     

    For some reason, I was also having a lot of trouble transferring the file "jquery-1.7.2.min.js" to the server. It's not a big file (I think 92 KB), but just about every time I tried uploading it via FileZilla, I would get disconnected from the server. I think I finally got the whole thing transferred this morning, so it should no longer be an issue. I transferred image files larger than this with no issue, so I don't know what FZ's problem is with this one particular JS file.

     

    This is the problem page (and I know the last color image is a little messed up).

     

    http://bentcupcakes.com/gallery.html

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    9. Nancy O.,
    Mar 10, 2013 11:51 AM   in reply to GhostFrappe
    Report

    Quite a few coding errors.  Scripts need to be wrapped inside <script> tags.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbentcupcakes. com%2Fgallery.html

     

     

     

    Nancy O.

     
    |
    Mark as:
  • GhostFrappe
    Currently Being Moderated
    10. GhostFrappe,
    Mar 10, 2013 7:35 PM   in reply to Nancy O.
    Report

    I think I got it working. The slide show effect wasn't working because I didn't realize the coding had to read as rel="lightbox[set]". Mine just said rel="lightbox." Also, I disabled the timeout function on file transfers and was able to get everything uploaded in full with no errors. Thank you again so much for all your help!

     
    |
    Mark as:
Actions

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