Lightbox gallery dreamweaver cs6

Hello, I m tried to insert a picture gallery with dreamweaver cs6 using the widget lightboxgallery, the first problem is that the buttons,next, previous ... are not displayed, the second problem happens when I want to insert a second " lightbox gallery" in the same page.
thank you for helping me

Many people have reported problems with the Lightbox widget. I highly recommend using FancyBox2 instead of that widget. To see a demonstration, copy & paste this code into a new, blank document. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
/**this styles image container**/
#thumbs p {
float:left;
width: 180px;
height: 12.5em;
margin: 10px 0 0 20px;
padding: 10px;
border: 1px solid silver;
/**rounded borders**/
-moz-border-radius: 20px;
-webkit-border-radius:20px;
border-radius: 20px;
/**this styles caption text**/
font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
color: #666;
text-align:center;
/**recommend using same size images**/
#thumbs img {
width: 160px; /**adjust width to thumbnail**/
height: 120px; /**adjust height to thumbnail**/
margin-bottom: 1.5em;
opacity: 0.75;
#thumbs img:hover {opacity: 1.0}
/**float clearing**/
#thumbs:after {
content:".";
clear:left;
font-size:0px;
line-height:0;
display:block;
visibility:hidden;
</style>
</head>
<body>
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>

<div id="thumbs">
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> <br />
Caption 1
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> <br />
Caption 2
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> <br />
Caption 3
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> <br />
Caption 4
</p>
<p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120" alt="Thumbnail 5" /></a> <br />
Caption 5
</p>
</div>

<h1>Fancybox with Iframe</h1>
<h3><a class="fancybox" data-fancybox-type="iframe" href="http://example.com">EXAMPLE.COM</a></h3>

<script>
        $(document).ready(function() {
            $('.fancybox, iframe').fancybox();
    </script>
</body>
</html>
Nancy O.

Similar Messages

CS6: Widget Browser and LightBox Gallery Widget

I am a student-- i am presently taking a dreamweaver CS6 class. i think understand correctly that the widget browser and the lightbox gallery widget are no longer available. if so, what do i for the replacement??? thx.

Primer for using jQuery plugins.
Alt-Web Design & Publishing: Primer for Using jQuery Plug-Ins
In addition, the Adobe Exchange has DW Extensions/Add-ons you could install with your CS6 Extension Manager.
Adobe Exchange
Nancy O.

Customizing Lightbox gallery in Dreamweaver CS5

Hi,
I've downloaded the jQuery LightBox gallery from Dreamweaver Exchange and I'd like to change the color of the overlay when the gallery is "up and running". By default it's black and I've gone through every item on the lightbox.css file but I can't find the place to customize the overlay...adding a new property doesn't work. Does anyone know how to do this?
Also I'd like to add a caption to each photo...how do I do this?
Thanks and best regards

Gomez,
If you have an issue you really ought to start your own thread. Whatever is happening for you is entirely different to the question asked here.
As for the overly question it looks like you are using Thickbox and as far as I can tell this is the code that will help you adjust the transparency/color of the overlay thing; this is the code that I think you will need to alter and it should be in thickbox.css or something like it?
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
Dreamweaver should hlep you locate that code and what I would do is use good ol' "tria-and-error" to see how ig goes.
Martin

Dreamweaver CS4 Lightbox Gallery Problem

Hello Everyone,
I am using Dreamweaver CS4 on a Mac and I am a beginner at producing my website, just so you know. I am using lightbox gallery for my photo gallery on my website and everything works fine except that when you click on the picture to start the gallery there is a question mark that pops up where there should be instead the enlarged picture. When I preview it using Safari the enlarged photo pops up with no problem, the question mark pops up only when I upload the website online. I have been trouble shooting to the best of my ability, but to no avail. Please someone, show me what I am doing wrong.
Here is the coding:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Photo Gallery</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="gallery1" class="lbGallery">
<ul>
    <li> <a href="images/lightboxdemo1.jpg" title=""> <img src="images/lightboxdemo_thumb1.JPG" width="72" height="72" alt="" /> </a> </li>
    <li> <a href="images/lightboxdemo2.jpg" title=""> <img src="images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="" /> </a> </li>
    <li> <a href="images/lightboxdemo3.jpg" title=""> <img src="images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /> </a> </li>
    <li> <a href="images/lightboxdemo4.jpg" title=""> <img src="images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /> </a> </li>
    <li> <a href="images/lightboxdemo5.jpg" title=""> <img src="images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /> </a> </li>
</ul>
</div>
<script type="text/javascript">
// BeginWebWidget lightbox_gallery
                    $(function() {
        $('#gallery1 a').lightBox();
// EndWebWidget lightbox_gallery
</script>
</body>
</html>
And the website URL is: http://majesticmonumentvalley.com/photogallery.html
Please note that I have not customized my own photos in the gallery because they only end up with the question mark so I wanted to fix this problem before I started putting my own photos on the website.
Thank you for your time.
-Jessica

Hello,
Thank you for your response. I put my own photos into the gallery and made sure they were located in the images folder. I previewed it in Safari and all was well. But, yet again, when I uploaded it online it does the same thing- a question mark appears instead of the enlarged image. The thumbnail images are fine, it is just the enlarged images giving me grief. What am I doing wrong?
The new coding:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Photo Gallery</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="gallery1" class="lbGallery">
<ul>
    <li> <a href="images/honeymoonarch1.jpg" title=""> <img src="images/honeymoonarch_thumbnail.jpg" width="200" height="133" alt="" /> </a> </li>
    <li> <a href="images/jessicaofmv.jpg" title=""> <img src="images/jessicaofmv_thumbnail.jpg" width="150" height="226" alt="" /> </a> </li>
    <li> <a href="images/mittensunriseglow.JPG" title=""> <img src="images/mittensunriseglow_thumbnail.JPG" width="200" height="150" alt="" /> </a> </li>
    <li> <a href="images/themittens.JPG" title=""> <img src="images/themittens_thumbnail.JPG" width="200" height="150" alt="" /> </a> </li>
    <li></li>
</ul>
</div>
<script type="text/javascript">
// BeginWebWidget lightbox_gallery
                    $(function() {
        $('#gallery1 a').lightBox();
// EndWebWidget lightbox_gallery
</script>
</body>
</html>
And the URL: http://majesticmonumentvalley.com/photogallery.html
Thanks again for your time.
-Jessica

Dreamweaver CS6 crashes in Lion

I've had Lion 10.7.4 recently installed, and Dreamweaver CS6 now crashes when I try to open an existing index.html file that opened fine in Snow Leopard 10.6.8. Nothing has changed on this file.

Thank you. I did what you said and it froze again. It does it with all the pages on the site. I'm wondering if it has anything to do with any of the .js scripts on the site. Below is the code from the index page.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cornerstone Interiors Calgary Home</title>
    <meta name="description" content="South Calgary Home Renovations Specialising in Kitchens, Bathrooms and Basement Development" />
<meta name="keywords" content="south calgary renovations, calgary kitchens, calgary bathrooms, calgary basement renovations, ceramic tile specialists" />
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/grid.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css">
    <link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script type="text/javascript" src="js/FF-cash.js"></script>
    <script type="text/javascript" src="js/easyTooltip.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.roundabout.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="js/hover-image.js"></script>
    <script type="text/javascript" src="js/jquery.faded.js"></script>
    <script type="text/javascript">
$(function(){
$('ul.sf-menu').superfish();
$('ul#myRoundabout').roundabout({
minOpacity: 0,
maxOpacity: 1,
minScale: 0.84,
easing:'easeInOutBack',
btnNext: '#next',
btnPrev: '#prev',
duration:600,
autoplay:8000
}).find("> li").append("<span></span>").not('.roundabout-in-focus').find("span").css({opacity:0});
$('#gallery .inner #prev').hover(
function(){$(this).stop().animate({width:"55px"}, 300, "easeOutBack")},
function(){$(this).stop().animate({width:"38px"}, 300, "easeOutBack")});
$('#gallery .inner #next').hover(
function(){$(this).stop().animate({width:"55px"}, 300, "easeOutBack")},
function(){$(this).stop().animate({width:"38px"}, 300, "easeOutBack")});
$("a[data-gal^='prettyPhoto']").prettyPhoto({theme:'facebook'});
$("#faded").faded({});
</script>

    
</head>
<body id="page1">

<header>
    <div class="main">
        <div class="inner">
             <div class="wrapper">
            </div>
            <h1>
                <a href="index.html">Cornerstone interiors</a>
          </h1>
            <nav>
                <ul class="sf-menu">
                    <li><a href="index.html" class="active">Home</a></li>
                    <li><a href="index-1.html">Company</a></li>
                    <li><a href="index-2.html">Services</a>
                    </li>
                    <li><a href="index-3.html">Gallery</a></li>
                    <li class="last"><a href="index-4.html">Contact</a></li>
                </ul>
            </nav>
            <div class="clear"></div>
        </div>
    </div>
</header>

<div id="gallery">
<div class="bottom-bg">
        <div class="inner">
            <div class="controls">
                <a id="next" href="#"></a>
                <a id="prev" href="#"></a>
            </div>
            <ul id="myRoundabout">
               <li><img src="images/page1-img1.jpg" alt=""></li>
               <li><img src="images/page1-img2.jpg" alt=""></li>
               <li><img src="images/page1-img3.jpg" alt=""></li>
               <li><img src="images/page1-img4.jpg" alt=""></li>
            </ul>
        </div>
    </div>
</div>

<section id="content">
<div class="main">
         <div class="container_24 relative">
            <article class="grid_15 prefix_1 suffix_1 a1">
                <div class="wrapper">
                    <img src="images/page1-img5.jpg" class="img-indent" alt="">
                    <div class="neg-indent">
                         <h3>Top Quality Renovations!<strong>We use only top quality materials.</strong></h3>
                        <p class="p1">
                            <strong>
                                For our renovations to be the best requires modern and top quality products.
                            </strong>
                        </p>
                        <p class="p1">
                        We're proud of our reputation and our warranty. That means that we are always using top notch building products. We also pay attention to the latest in building technology on order to provide our customer with the best user experience. For an estimate call Tim at <strong>403-888-9298</strong>, or go to the <a href="index-4.html">contact page</a> to receive a reply at your convenience. </p>
                    </div>
                </div>
                </article>
            <article class="grid_7 a2">
                 <div class="inner">
                    <h3 class="hp-1">Services</h3>
                    <div class="hr"></div>
                    <ul class="list-1">
                         <li><a href="index-3.html">Home Renovations</a></li>
                        <li><a href="index-3.html">Kitchens</a></li>
                        <li><a href="index-3.html">Bathrooms</a></li>
                        <li><a href="index-3.html">Living Spaces</a></li>
                        <li><a href="index-3.html">Basement Devlopment</a></li>
                        <li><a href="index-3.html">Offices</a></li>
                        <li><a href="index-3.html">Comercial</a></li>
                        <li><a href="#">Flood & Fire Restoration</a></li>
                    </ul>
                </div>
            </article>
            <div class="clear"></div>
            <div class="padding-1">
                 <article class="a3">
                     <div class="inner">
                         <div class="wrapper">
                            <div class="fleft">
                                <h3 class="hp-1">Featured Projects</h3>
                            </div>
                            <a href="images/Gallery/index.html" class="link-1">View All</a>
                        </div>
                        <div class="hr"></div>
                        <div class="padding-2">
                             <div class="col-1">
                                 <a href="images/page1-kitch1.jpg" data-gal="prettyPhoto[pp_gal]" class="lightbox-image img-indent-bot"><img src="images/page1-img6.jpg" alt=""></a>
                                <strong class="project-name">Kitchens</strong>
                                <a href="#" class="link-2"></a>
                          </div>
                            <div class="col-2">
                                 <a href="images/page1-wetbar.jpg" data-gal="prettyPhoto[pp_gal]" class="lightbox-image img-indent-bot"><img src="images/page1-img7.jpg" alt=""></a>
                                <strong class="project-name">Family Rooms</strong>
                                <a href="#" class="link-2"></a>
                            </div>
                            <div class="col-3">
                                 <a href="images/page1-bathroom.jpg" data-gal="prettyPhoto[pp_gal]" class="lightbox-image img-indent-bot"><img src="images/page1-img8.jpg" alt=""></a>
                                <strong class="project-name">Bathrooms</strong>
                                <a href="#" class="link-2"></a>
                            </div>
                             <div class="clear"></div>
                        </div>
                    </div>
                 </article>
            </div>
        </div>
    </div>
</section>

<aside>
<div class="main">
         <div class="container_24">
             <div class="wrapper padding-1 vr-border-1">
                 <div class="vr-border-2">
                    <article class="prefix_1 grid_9 suffix_1">
                        <h3>Latest News</h3>
                         <div id="faded">
                            <ul class="slider">
                                 <li>
                                    <p>
                                        <strong>01-05-2012</strong> We are pleased to announce the launch of our new website May1, 2012.
                                    </p>
                                    <div class="buttons">
                                        <a href="#" class="button-2"></a>
                                    </div>
                                </li>
                                <li>
                                    <p>
                                        <strong></strong>
                                    </p>
                                    <div class="buttons">
                                        <a href="#" class="button-2"></a>
                                    </div>
                                </li>
                                <li>
                                    <p>
                                        <strong></strong>
                                    </p>
                                    <a href="#" class="button-2"></a>
                                </li>
                            </ul>
                            <div class="navigation">
                                <ul class="pagination">
                                </ul>
                            </div>
                         </div>
                    </article>
                    <article class="prefix_1 grid_4 suffix_2">
                         <h3>Company</h3>
                        <ul class="list-2">
                             <li><a href="index-1.html">About us</a></li>
                            <li><a href="index-1.html">Work team</a></li>
                            <li><a href="index-2.html">What we do</a></li>
                            <li><a href="#">Clients</a></li>
                            <li class="last"><a href="index-5.html">Testimonials</a></li>
                        </ul>
                    </article>
                    <article class="prefix_1 grid_5">
                         <h3> </h3>
                        <dl class="adress">
                             <dt> </dt>
                            <dd> </dd>
                            <dd> </dd>
                            <dd> </dd>
                        </dl>
                    </article>
                </div>
            </div>
        </div>
    </div>
</aside>

<footer>
    <div class="inner">
        <ul class="bottom-menu">
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="index-1.html">Company</a></li>
            <li><a href="index-2.html">Services</a></li>
            <li><a href="index-3.html">Gallery</a></li>
            <li class="last"><a href="index-4.html">Contacts</a></li>
        </ul>
    </div>
</footer>
</body>
</html>

Lightbox gallery extension - upload problems!

Hi,
I've made a small test site in Dreamweaver CS5 with a photo gallery in a Lightbox extension ( that I've added from Dreamweaver extensions ). Everything looks and works the way I want it to in Dreamweaver Safari preview...but as soon as I upload my test site, the Lightbox Gallery doesn't work anymore. I asked my webhotel support for help, but they say that I should contact the developer for an answer ???
I'm thinking that it must a very common problem, does anyone have a clue what the problem could be?
( My webhotel is an advanced LINUX server ...as if I knew what that means ;-)
Thanks and Merry Christmas !

You have:
<a href="nyhavn.jpg" title="Nyhavn, heritage harbour and a popular
place to go for dinner or a drink.">
<img src="nyhavn_s.jpg" width="72" height="73" alt="" /> </a>
Are you not supposed to have rel="lightbox" added to it? Such as
<a href="nyhavn.jpg" title="Nyhavn, heritage harbour and a popular
place to go for dinner or a drink.">
<img src="nyhavn_s.jpg" rel="lightbox" width="72" height="73" alt="" /> </a>
On closer inspection, if you look at your "scripts/lightbox.js"
It is not a js file at all, it is an html file....what happened to your original js file?
Gary

Lightbox-gallery too low on the page

I have created a photo gallery in dreamweaver cs5 with Lightbox2. The page with the gallery is quite long and when I open the gallery I see nothing and i have to scroll down very long to see the photos. Is there a way to ensure that the lightbox gallery opens at the top of the page?
http://mastrigt.home.xs4all.nl/stellingloop/stelling.htm
click on Foto’s. Its Dutch :-)
ZONDAG 10 JULI 2011
Wandeling langs de duinen
Ik was er zelf niet bij; de foto’s zijn van Marian.
Foto's
Thanks in advance, Laurens
sorry i did something wrong , now it seems the thread is solved , so i put this question again

Ok
thank you
Op 1 aug. 2011, om 18:18 heeft Nancy O. het volgende geschreven:
Probably because it was a duplicated post.
Nancy O.
>

Lightbox-gallery too low

I have created a photo gallery in dreamweaver cs5 with Lightbox2. The page with the gallery is quite long and when I open the gallery I see nothing and i have to scroll down very long to see the photos. Is there a way to ensure that the lightbox gallery opens at the top of the page? Thanks in advance, Laurens

You have no document type declaration on the page. Lightbox requires a valid document type to work properly in all browsers.
Modify > Page Properties > Title Encoding >
Select a document type that fits your coding skills (recommend XHTML transitional or XHTML strict).
Also, you will get better results if you put your lightbox gallery on a separate, shorter page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Help with a weird little blue line in the bottom right corner of my lightbox gallery?

I get a weird little blue line in the bottom right corner of my lightbox gallery when viewing in Safari and Chrome. Its not there when looking in Dreamweaver or Firefox. I'm going crazy! Can anyone help?

I have added to following code to sample_lightbox_layout.css
.lbGallery a {
text-decoration: none;
That fixes the dash, which is an underline. The default style for a link is an underline and since it was not defined the tag gets the default style for the underline.
Good luck.

Lightbox Gallery Widget Rocks

Hello Everyone,
I really like the look of photographs as presented by the Lightbox Gallery Widget, available on Dreamweaver Exchnage, and authored by Andres Cayon, from the Spain Adobe Dreamweaver User Group.
Also, please let me express my gratitude for his help with a small issue. The word 'close" did not appear because the path for that gif needed to be changed in JS Lightbox. Not only did Andres Canyon help resolve this issue, he did so very promptly.
The Lightbox Gallery Widget is a beautiful way to showcase my photographs and I am grateful that he makes it available for free and for his timely assistance. What can I say but many thanks to Andres Cayon!
Gail Indvik
Oakland, CA

Thanks for the reply
I think i have it working now.
Not really sure what I did though.

Lightbox Gallery previous and next not visible

I'm still looking for a solution to the other Lightbox Gallery question I posted earlier, but in the meantime I've copied files from the application support folder mentioned before and have the gallery working up to a point.
It works perfectly well locally in Dreamweaver Live View but having uploaded the files to the server the gallery functions without displaying the Previous, Next or Close tabs. They're active but not visible which makes me think there is a failure to load the icons
http://www.yellotestbed.co.uk/shtml/photo_gallery.shtml
Thanks

Looks like you need to fix the links to those images in your javascript.
You have a mix of "images" and "Images" for the directory names in the links. It looks like your actual folder is capital "i" Images. Your local files will work fine, because your OS sees no difference between "images" and "Images" however your server treats them as two different directories so you're getting 404 File Not Found errors because it is looking for a directory that doesn't exist
File names should be all lower case with no special characters ($%&* etc). You should also use hyphens and underscores instead of spaces to avoid issues like this.

Problems using lightbox gallery widget

Hi, I am just learning Dreamweaver and thought I would try out a widget. I tried the lightbox gallery widget, and it mostly works, except that I get a box with a question mark on the right, under the photo when it is enlarged. It can't find some of the included widget image icon files. Anybody know why? It does it in live view and firefox and safari.
I looked at the code and from what I can tell, the code references images which appear to be in the correct directory /images/lightbox/blahblah.gif.
For example, the widget is supposed to say 'close' under the image, and that text is a .gif image apparently.
Anyone have this trouble or know what the problem could be?
Thanks
Bob

I found a fix for something similar that occurred on my machine. I too was seeing no problems locally but when I posted it to my site, it just had the placeholder and no images....
Apparently, dreamweaver is smarter than the browser... (maybe incorrect statement) however..... the file extensions are case sensitive!
I had this-------- <A href="Img/CGM_1.JPG" border="0" rel="lightbox[Img/CGM_1thumb.JPG]" title="CGM Pic Set"><img src="Img/CGM_1thumb.JPG" /></a>
<a href="Img/CGM_2.jpg" rel="lightbox[Img/CGM_1thumb.JPG]"></a>
                  <a href="Img/CGM_3.jpg" rel="lightbox[Img/CGM_1thumb.JPG]"></a>
                  <a href="Img/CGM_4.jpg" rel="lightbox[Img/CGM_1thumb.JPG]"></a>
Well, I didnt think anything was so bad, all of the colors were right I wasn't getting any warnings.... wtf?
As it turns out, and this is only because I just started a new image set after testing an individual - - baby steps - - if you use the properties bar at the bottom of DW, it applies a different case for specific parts...... i.e. this is what it produced
<A HREF="Img/CGM_1.jpg" border="0" rel="lightbox[Img/CGM_1thumb.jpg]" title="CGM Pic Set"><img src="Img/CGM_1thumb.jpg" /></a>
                  <a HREF="Img/CGM_2.jpg" rel="lightbox[Img/CGM_1thumb.jpg]"></a>
                  <a HREF="Img/CGM_3.jpg" rel="lightbox[Img/CGM_1thumb.jpg]"></a>
                  <a HREF="Img/CGM_4.jpg" rel="lightbox[Img/CGM_1thumb.jpg]"></a>
Notice the HREF's are now UPPER case and the jpg's are now lower case. !!!! really?!?!?
Also, another thing to look out for is the folder/ in front of your thumbnail; make sure it is there. In my case I use my sam "Img" folder, not the "images" folder that lightbox creates.
Hope this helps, I beat my head against the wall for a total of 10 hours over 2 days trying to figure this out. I couldn't find anything on the internet. I'm going to post this so others having this issue get it resolved. I found those, just no resolution.

Why my adobe lightbox gallery widget works well on "live view" and not well in the browsers?

Hi I need help with adobe lightbox gallery.I am building a website using dreamweaver cs5.
My problem is that the gallery works perfect in "live view" but when I check it in the browsers the pictures do not show at all.
What am I doing wrong .Please help.
Thank you

Hi All:
From my experience with other people having problems with the widget, here are some things you can check when it doesn't work:
Names with uppercase characters: Some servers don't see a difference between "images" and "Images" but most of them do: Check that the paths to the folders and files are correctly written. I encourage people to use always lowercase characters. Same applies to spaces (I prefer to use an underscore instead)
"scripts" folder: I've also found that some servers don't allow a folder called "scripts". You should change both the folder name and the paths in the main document.
Paths: This is the most common one: Make sure that the paths to the required files are correct. In theory, you shouldn't find this when the document is at the site root. If the document is inside a folder, sometimes files' location and related paths may vary. If you are using CS5 or above, a good trick is using the related files toolbar and check whether DW can find and open the files.
Upload all the required files: Some users forget to upload the "lightbox" folder, located inside "images". That folder contains the images used by the lightbox to work (nav and close buttons, for example). And also check that the paths to those images is correct. In this case, you can edit the paths in the parameters that you will find in the script code added to the document (names are quite self explanatory and every param is commented, so this shouldn't be a problem)
I hope this helps.

Saving Images in Dreamweaver CS6

I have imported a menu that I created in Fireworks CS6, into dreamweaver cs6, I save to the remote server and you can't see anything.
Same thing with Bridge CS6. I create a slideshow and import into dreamweaver cs6 and still nothing. Or I will simply put a jpeg or png picture file and the image won't show. Please help
I just need to know how to save the different images/menu bars in dreamweaver cs6 to the remote server, and I would like it to show online automatically. What do I do
www.uniquehairytage.com   (this is one of the sites I am talking about)

I can only assume that it's the dodgy code that exports from Fireworks because your images are uploaded and in the correct place.
Can you copy all of the code below and paste it into a new Dreamweaver document (you'll have to open code view to do this) save it as test.html and upload it to your remote server and then look at it in a browser and see what happens?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unique Hairytage</title>
<style type="text/css">
.UNDER {
    color: #FFF;
    font-size: 36px;
.F {
    text-align: center;
.F {
    color: #FFF;
.F {
    font-size: 36px;
.F {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
.F {
    font-family: Georgia, "Times New Roman", Times, serif;
.if {
    font-size: 24px;
.tab {
    font-family: Georgia, "Times New Roman", Times, serif;
.if {
    font-size: 24px;
.tab {
    color: #FFF;
.if {
    text-align: center;
.if {
    text-align: center;
.t {
    font-size: 24px;
.p {
    color: #000;
.t {
    font-size: 24px;
.web {
    font-size: 36px;
.full {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #633;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body bgcolor="#CCCCCC" onload="MM_preloadImages('BrandyMenu_r2_c1_s2.png','BrandyMenu_r1_c1_s2.jpg','BrandyMenu_ r1_c2_s2.jpg','BrandyMenu_r1_c3_s2.jpg','BrandyMenu_r1_c4_s2.jpg')">
<p class="full"> </p>
<table width="1052" cellpadding="0" cellspacing="0" border="0" bgcolor="#fff" style="margin: 0 auto;">
<tr>
<td>
<p><img src="http://www.uniquehairytage.com/Untitled-2.png" width="1052" height="93" /></p>
</td>
</tr>
<tr>
<td>
Delete this text - its just proping open a table cell
</td>
</tr>
<tr>
<td><table width="420" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
<tr>
<td><a href="http://www.uniquehairytage.com/home.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('BrandyMenu_r1_c1','','BrandyMenu_r1_c1_s2.jpg',1);"><img name="BrandyMenu_r1_c1" src="http://www.uniquehairytage.com/BrandyMenu_r1_c1.jpg" width="105" height="38" id="BrandyMenu_r1_c1" alt="" /></a></td>
<td><a href="http://www.uniquehairytage.com/about.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('BrandyMenu_r1_c2','','BrandyMenu_r1_c2_s2.jpg',1);"><img name="BrandyMenu_r1_c2" src="http://www.uniquehairytage.com/BrandyMenu_r1_c2.jpg" width="128" height="38" id="BrandyMenu_r1_c2" alt="" /></a></td>
<td><a href="http://www.uniquehairytage.com/gallery.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('BrandyMenu_r1_c3','','BrandyMenu_r1_c3_s2.jpg',1);"><img name="BrandyMenu_r1_c3" src="http://www.uniquehairytage.com/BrandyMenu_r1_c3.jpg" width="150" height="38" id="BrandyMenu_r1_c3" alt="" /></a></td>
<td><a href="http://www.uniquehairytage.com/contact.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('BrandyMenu_r1_c4','','BrandyMenu_r1_c4_s2.jpg',1);"><img name="BrandyMenu_r1_c4" src="http://www.uniquehairytage.com/BrandyMenu_r1_c4.jpg" width="128" height="38" id="BrandyMenu_r1_c4" alt="" /></a></td>
</tr>
</table></td>
</tr>
</table>
<table width="1052" height="217" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#FFFFFF"><p> </p>
<p> </p>
<p align="center"><span class="full">FULL SERVICE HAIR STYLIST</span></p>
<table width="753" border="0" align="center">
<tr>
<td width="296"><img src="http://i339.photobucket.com/albums/n457/scervantes-01/Brandypic.jpg" width="296" height="481" /></td>
<td width="447" align="center" valign="top"><p class="tab"> </p>
<p> </p>
<p class="tab"> </p>
<p class="t"> </p>
<p align="center" class="t">530-415-5524</p>
<p align="center" class="tab"><a href="mailto:[email protected]" class="t">[email protected]</a></p>
<p class="tab"></p></td>
</tr>
</table></td></tr>
</table>
</body>

Flash lightbox gallery

Hey everyone is there way to create a lightbox gallery using Adobe Flash? i have Flash as well but cs6
thanks if anyone can help out?

you would create movieclips for the black semi-transparent background and white background, use a database (like xml) with the urlloader class to supply image path/file names and size, the loader class to load external images and display a preloader movieclip and the backgrounds and use the tween class (or a 3rd party library like tweenlite) to tween the white background and fade-in the loaded image.

Lightbox gallery dreamweaver cs6

Similar Messages

Maybe you are looking for