PDA

View Full Version : lightbox not working



tauhui
03-01-2012, 06:27 AM
1) Script Title: light box2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem: Light box not working... Once click, background turns black but large image doesnt show up. And when clicked again, the dark background gone and the image link also cant be seen.


<!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>lightbox</title>

<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" />
</head>

<body>
<div id="lightbox">
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
</div>
</body>
</html>

I am testing it in a new folder and with js, css and images folder and this lightbox.php All the script are downloaded and i followed the instruction as follow. Why can't it work?

jscheuer1
03-01-2012, 10:18 AM
Usually that means that the path and/or filename of the image is incorrect (404 Not Found):



<body>
<div id="lightbox">
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
</div>
</body>
</html>

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

tauhui
03-01-2012, 12:00 PM
the image is at the correct folder.
Inside my lightbox folder includes-> lightbox.php, images folder->(image-1/thumb-1.jpg)(closelabel/close/next/loading/prelabel/nextlabel/prev.gif), css folder->lightbox.css, js folder->(effects/fadeslideshow/lightbox/prototype/scriptaculous.js)

lightbox.php

<!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>lightbox</title>

<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" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="js/fadeslideshow.js"></script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.dynamicdrive.com/ddincludes/logo.gif", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
[""],
["http://www.dynamicdrive.com/ddincludes/logo.gif", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
var mygallery2=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})
</script>
</head>

<body>
<div id="lightbox">
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src="images/thumb-1.jpg" /></a>
</div>
<div id="fadeshow1"></div>
<br />
<div id="fadeshow2"></div>
</body>
</html>


lightbox.js


// Configuration
//
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

var animate = true; // toggles resizing animations
var resizeSpeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------




I really have no clue where went wrong..

jscheuer1
03-01-2012, 05:00 PM
Your lightbox.js file might have become corrupted. If you edited it in Dreamweaver or some other WYSIWYG editor, these sometimes automatically alter the paths assigned internally to src attribute such that they're all prefaced with a relative path expression related to the folder that the script is in.

To test that theory you need to start with a fresh copy of lightbox.js and edit it only in a text only editor like NotePad or SimpleText.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.