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

Similar Messages

Help putting a photo gallery in Dreamweaver CS5.5

Hi,
I'm new to web design and have been learning to use DW CS5.5. My goal is to design a website for my small, online antiques business with a photo gallery in it.
The Adobe Extension site lists several photo gallery options, but none for CS5.5. Does anyone have any ideas on how I can easily, or fairly easily add a simple photo gallery to my new site? By simple, I mean thumbnails linking to a page with a larger photo and descriptive text, nothing else. I really want to keep it simple.
Is my only choice to build it myself from scratch?
Any help you can give will be most appreciated.
Terry3Mc

hello Terry,
There is a website called www.templatesold.com you have to pay.. but i have a login
there are a lot of templates of photo gallerys.
email-me [email protected]
Leonardo Hermoso
bovespa

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 sry light box gallery doesn't insert in dreamweaver cs5.5?

I just upgraded to dreamweaver cs5.5 and the spry lightbox gallery widget doesn't load properly ? I drag and drop in design view. All my other adobe programmes are still cs3 flash photoshop etc is this why or what am I doing wrong as all i get on the page is a set of images vertically from the gallery template and no gallery layout? Can anyone help?

Not sure that Spry has a lightbox gallery. I assume that you mean the jQuery LightBox Gallery Widget.
If the assumption is correct, then make sure that you have the following files in the correct folder/directory.
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/lightbox.js'></script>
<link type='text/css' href='css/lightbox.css' rel='stylesheet'/>
<link type='text/css' href='css/sample_lightbox_layout.css' rel='stylesheet'/>
It is wise to supply a link to your site so that we do not have to make assumptions
Gramps

Xpose jquery gallery add-on for dreamweaver cs5.5

Hi,
xpose jquery gallery add on for dreamweaver cs5.5 not working within internet explorer when website uploaded
The current slide index file seems to be the issue, but not sure where or how to fix this...any ideas gratefully recieved. thanks in advance

Hi,the webpage in question is http://www.blackcatbrides.co.uk, then the gallery is stored within the collections page.
Again thanks for your help in advance
Here is also the script within dreamweaver
<!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=iso-8859-1" />
<title>Your Wedding</title>
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../includes/jQueryGallery/gallery.extend.js"></script>
<script type="text/javascript" src="../includes/jQueryGallery/jQueryGallery.js"></script>
<script type="text/javascript" src="../includes/jQueryGallery/jQueryGallery1.js"></script>
<link href="../includes/jQueryGallery/jQueryGallery1.css" rel="stylesheet" type="text/css" />
<link href="../includes/jQueryGallery/jQueryGallery1_lightbox/lightbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="header">
    <object type="application/x-shockwave-flash" data="images/57.swf" width="1000" height="560">
      <param name="movie" value="images/57.swf" />
    </object>
</div>
<div class="clear"></div>
<div class="workzone">
    <div class="workzone-left">
      <div style="padding:0 15px 20px 15px;">
        <h1 class="inner">Our Collections</h1>
        <p> </p>
        <div id="jQueryGallery1Container" class="jQGalleryC">
          <div id="jQueryGallery1" class="jQueryGallery"></div>
          <div id="jQueryGallery1_thumbscroll_in"></div>
          <div id="jQueryGallery1_caption_in">Image caption.</div>
          <div id="jQueryGallery1_subcaption_in">Image subcaption.</div>
          <div id="jQueryGallery1_currentslide_in">{index}/{total}</div>
          <div id="jQueryGallery1_progressbar_in"></div>
          <div id="jQueryGallery1_controls_in">
            <div id="jQueryGallery1_playpause_in">
              <div class="play"></div>
              <div class="pause"></div>
            </div>
            <div id="jQueryGallery1_fullscreen_in"></div>
            <div id="jQueryGallery1_albums_in"></div>
          </div>
          <div id="jQueryGallery1_albumsContainer_in">
            <ul>
              <li ><a><img src="" width='376' height='120'/> <span class="title" style="display:block">Title of album</span> <span class="subtitle" style="display:block">Description of album</span></a></li>
              <li style="padding-right:0px;"><a><img src="" width='376' height='120'/> <span class="title" style="display:block">Title of album</span> <span class="subtitle" style="display:block">Description of album</span></a></li>
              <li ><a><img src="" width='376' height='120'/> <span class="title" style="display:block">Title of album</span> <span class="subtitle" style="display:block">Description of album</span></a></li>
              <li style="padding-right:0px;"><a><img src="" width='376' height='120'/> <span class="title" style="display:block">Title of album</span> <span class="subtitle" style="display:block">Description of album</span></a></li>
              <li style="padding-bottom:0px;"><a><img src="" width='376' height='120'/> <span class="title" style="display:block">Title of album</span> <span class="subtitle" style="display:block">Description of album</span></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
<div class="footer">
    <div class="footer-left"><a href="privacy.html">Privacy Statement</a></div>
    <div class="footer-right"> © Black Cat Brides. All rights reserved </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>

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

How does one add a photo gallery to my web site in Dreamweaver CS5 and have the link recognized as a destination file?

How does on add a photo gallery to a web site in Dreamweaver CS5 and have the file folder which contains the photos, recognized as the "go to location" for the link up?

Ok. So Photos1.htm is the main gallery page.
And it looks like you have sub-folders with images in them like these from 2011 and 2010
LLA Picnic 2011/
photos 2010/
Have you defined a site in DW yet? That's a critical first step in getting DW to recognize your site's links and other assets. See video below:
GS-01: Defining a new site | Learn Dreamweaver CS5 & CS5.5 | Adobe TV
Nancy O.

Customizing Photoshop Web Gallery in Dreamweaver

HOW DO I STOP WIDTH OF IMAGE FROM STRETCHING? (height is in
proportion)
more details:
I've almost finished customizing a Photoshop web gallery in
Dreamweaver, which is completely confusing for me (i'm a novice)
and any head way i made in changing the template was mainly from
trial and error as it is very unclear in the instrutions on how to
edit.
I finally have a template that is starting to look the way I
want with the thumbnails at the bottom in an iframe and with the
larger image above with arrows on either side. I edited it so the
only thing that's changed in size on the image is the Height so the
width can change automatically.
When the practice gallery I made first opens I've got it
displaying each photo for 4 seconds then going to the next, there's
also the option to pause. While it's playing when it first opens
everything looks fine, the image sizes are right the height is
correct and there's no stretching. BUT as soon as I click on a
thumbnail at the bottom it decides to stretch the width of the
image to fit the table, and then every image after in the slide
show is also stretched. Even if i pause the slides and select a
different image thumb it displays the streched image and not the
proper proportioned image that is displayed when the page is first
opened.
Anyone know how to fix this??????
Any help at all would be appreciated.
Thank you.
Free Flash Video
Tutorials

My advice is to get a 3rd party gallery creation program.
Many are free and most are better than Adobe's half-baked offerings.

How do you embed a Lightroom 3 Slideshowpro web gallery into webpage using Dreamweaver CS5?

I watched the YouTube video by Rafael "RC" Concepcion for incorporating Lightroom into Dreamweaver CS4 but I'm using Dreamweaver CS5 and his method did not work on my Mac system. Does anyone have a step-by-step way or video?

One way to do it is put each gallery in its own subdirectory of your main page (you can use multiple sub galleries) and then have the main page in the root that links to the index.html files in each subdirectory. If your main page is not in the root you have to add the appropriate structure in the return link in the lightroom created gallery "Web or Mail Link" setting.
In the main page the link to my NATURE page would be   ../nature/index.html
Then in the Lightroom created NATURE page you can use the "Contact Info" or "Identity Plate" (This can be graphical as shown on my page)     "Web or Mail Link" setting to return to the main page using      ../index.html
To see and example see my site   http://www.ajaxmtn.com

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.

I cant upload cs5 bridge web gallery to dreamweaver

Hello I created a web gallery in cs5 bridge. When I try to upload to dreamweaver I get an error message (access denied when creating directory). Is there any other way to to get my web gallery to dreamweaver? Thank you for your help in advance.

Hi,
you could use David Powers tutorial here the link to it:
http://foundationphp.com/tutorials/gallery/embed1.php.
Hans-Günter

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

Best way to insert non-flash photo album in Dreamweaver CS5.5

Using Dreamweaver CS4, I created my wife's art website. It is: www.tanglewoodbrushstrokes.com
To insert photo albums, I used Bridge and Fireworks. Once past the initial learning curve, I was able to create these albums fairly easily. However, these albums have two limitations that I would like to address.
1. Adding or deleting an image requires creating a new album and then posting it on the page. Now that I have practice, it doesn't take me very long to do this but there must be a simpler way. As you will see on my wife's site, she has many pages of photo albums. Moving photos from her "Recent Creations" page means those images my be disbursed over three or four different albums. So this can be very time consuming.
2. The albums created in this manner are flash galleries and are not visible on Iphones or Ipads.
I recently purchased Dreamweaver CS5.5 so I could use HTML5 in order to make my site work on Iphones and Ipads as well as PC's. I have nearly completed the tutorial and am about ready to create a new site. Today I have done some searching for ways to use non-flash galleries and have not come up with a definitive answer.
As you can see on my wife's website, the galleries are fairly simple. All I really need is a page of thumbnails leading to a larger image with a description. I want to keep it that way.
Any suggestions?

There is no one size fits all solution to this. You're using DW to make a gallery and it's not really a gallery creation tool per se. It's web authoring software. So whichever gallery solution you choose it's going to come from someplace else. And then you must integrate it into your HTML pages.
Personally, I really like dynamic slideshows with jQuery. Add some PHP code to your page. Upload jQuery scripts and optimized images to your server. Done.
To swap images later, add/delete files from image folder on server. Done.
You can see a live demo of this below:
http://alt-web.com/DynamicSlides/
http://jalbum.net/
If you want to generate a lot of different galleries quickly, look at JAlbum. It's a commercial product that creates the thumbnail images & HTML pages for you. There are lots of skins (styles) to choose from and you can further customize layouts with CSS.
http://www.projectseven.com/products/galleries/ssm/index.htm
PVII Slide Show Magic - extension for Dreamweaver
jQuery Fancy Box ~
http://fancybox.net/
57 Free Image Gallery Solutions with jQuery ~
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

I just upgraded to dreamweaver cs5.5 and widget doesn't load properly ?

I just upgraded to dreamweaver cs5.5 and the spry lightbox gallery widget doesn't load properly ? I drag and drop in design view. All my other adobe programmes are still cs3 flash photoshop etc is this why or what am I doing wrong as all i get on the page is a set of images vertically from the gallery template and no gallery layout? Can anyone help?

Was my answer here http://forums.adobe.com/message/4339831#4339831 not good enough???
Gramps

Customizing Lightbox gallery in Dreamweaver CS5

Similar Messages

Maybe you are looking for