View Full Version : help - thumbnails not working on lightbox gallery!

11-28-2012, 01:50 PM
Hi there,

I am looking for some help - I used the widget making tool to make a lightbox gallery (using cs6). I'm now using CS3 to continue editing it, but none of the thumbnails seem to be working when I test them on a browser?

Here is the code if it helps.

/* BeginOAWidget_Instance_2127022: #gallery */

.lbGallery {
/*gallery container settings*/
background-color: #333333;
padding-left: 5px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
width: 1000px;
height: auto;
text-align: center;
border: 5;
.lbGallery ul { list-style: none; margin:0;padding:0; }
.lbGallery ul li { display: inline;margin:0;padding:0; }
.lbGallery ul li a{text-decoration:none;}

.lbGallery ul li a img {
/*border color, width and margin for the images*/
border-color: #000000;
border-left-width: 5px;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;

.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #cccccc;
border-left-width: 5px;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;

#lightbox-container-image-box {
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;

#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
/* EndOAWidget_Instance_2127022 */
<script type="text/xml">
<oa:widget wid="2127022" binding="#gallery" />

<div id="gallery" class="lbGallery">
<li> <a href="bowls web/bowl-1.jpg" title=""><img src="file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/bowls web/bowl-1.jpg" width="72" height="72" alt="red" /></a> </li>
<li> <a href="bowls web/bowl-2.jpg" title=""><img src="file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/bowls web/bowl-2.jpg" width="72" height="72" alt="Tree" /></a> </li>
<li> <a href="bowls web/bowl-3.jpg" title=""><img src="file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/bowls web/bowl-3.jpg" width="72" height="72" alt="" /></a> </li>
<li> <a href="bowls web/bowl-4.jpg" title=""><img src="file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/bowls web/bowl-4.jpg" width="72" height="72" alt="" /></a> </li>
<li> <a href="bowls web/bowl-5.jpg" title=""><img src="file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/bowls web/bowl-5.jpg" width="72" height="72" alt="" /></a> </li>
<li> <a href="bowls web/bowl-6.jpg" title=""><img src="file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/bowls web/bowl-6.jpg" width="72" height="72" alt="red" /></a> </li>
<li> <a href="bowls web/bowl-7.jpg" title=""><img src="file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/bowls web/bowl-7.jpg" width="72" height="72" alt="red" /></a> </li>
<li> <a href="bowls web/bowl-8.jpg" title=""><img src="file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/bowls web/bowl-8.jpg" width="72" height="72" alt="red" /></a> </li>
<script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery

$('#gallery a').lightBox({
imageLoading: '/images/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: '/images/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: '/images/lightbox/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: '/images/lightbox/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: '/images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.
overlayBgColor: "#999999", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
overlayOpacity: .0, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage: 'Image', //Default text of image
txtOf: 'of'

// EndOAWidget_Instance_2127022

And, yes it possibly is something really stupid but I am a newb, so am here to learn!
Thanks for any help you can give.

d a v e
11-28-2012, 04:32 PM
url would be easier

11-28-2012, 05:29 PM
its not online yet, and you wouldn't be able to see the images K.

11-28-2012, 05:30 PM
Basically everything works fine when I test it except the thumbnails have little question marks ...

11-28-2012, 07:12 PM
When we ask to see the site, it's not because we want to _see_ the error; we need to investigate it.

The red x is because the path to your images is not right. There's no image where you tell the browser there is one. So there's your quick/short answer :)

If you want us to tell you _why_ you've linking to non-existing images locations, then upload it (temporarily) on the webs, and usually it just takes 10 seconds to find out what is wrong.

11-28-2012, 07:14 PM
Actually, all these links are wrong:
file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/bowls web/bowl-2.jpg

The whole 'file:///Macintosh HD/Users/katherinecoulton/Documents/JohnMcCree/' should not be there.

The first thing you do when you start a site, is to define it in DW, so that it know how to make proper links.

12-02-2012, 08:09 PM
Hi again - you helped me work out what was wrong! Working fine now. I have defined it now (I think?) by the method of clicking the button that looks about right... Anyway, it works now so must have done the right thing!


PS. I probably will be back ...

12-03-2012, 03:50 PM
PS. I probably will be back ...

Please do 8)