Skip navigation
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.

 
Replies
  • Currently Being Moderated
    Mar 8, 2013 12:35 PM   in reply to GhostFrappe

    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:
  • Currently Being Moderated
    Mar 8, 2013 12:44 PM   in reply to GhostFrappe

    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:
  • Currently Being Moderated
    Mar 8, 2013 1:26 PM   in reply to GhostFrappe

    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:
  • Currently Being Moderated
    Mar 9, 2013 10:36 AM   in reply to GhostFrappe

    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:
  • Currently Being Moderated
    Mar 10, 2013 11:51 AM   in reply to GhostFrappe

    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:

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