Log in

View Full Version : Javascript Image Viewer


starr05
11-25-2014, 12:12 AM
I am trying to re-create [Broken Link Removed] but when I run it, it opens one image then closes it automatically. Not sure what I am doing wrong.



<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>Slide Show</title>
<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototype.compressed.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/dhtmlHistory.js"></script>
<script type="text/javascript" src="js/customsignsheader.js"></script>

</head>
<body>
<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes">
<img src="images/sunset.jpg" alt="lime" width="400" height="300" border="0" /></a>
</div>

<a href="images/desert.jpg" rel="lightbox[slide]" caption="Sunflower"></a>
<a href="images/beech.jpg" rel="lightbox[slide]" caption="Dolphin"></a>
<a href="images/lime.jpg" rel="lightbox[slide]" caption="Waterfall"></a>

<script type="text/javascript" src="customsignsfooter.js"></script>
</body>
</html>
jscheuer1
11-25-2014, 12:34 AM
The link to the demo page of the script that you posted was truncated (broken) so I removed it. What script exactly are you trying to use? Looks like some outdated version of lightbox (lightbox no longer uses Prototype/Scriptaculous).

You might have better luck scrapping that and using the most recent version:

http://lokeshdhakar.com/projects/lightbox2/
starr05
11-25-2014, 01:24 AM
The link to the demo page of the script that you posted was truncated (broken) so I removed it. What script exactly are you trying to use? Looks like some outdated version of lightbox (lightbox no longer uses Prototype/Scriptaculous).

You might have better luck scrapping that and using the most recent version:

http://lokeshdhakar.com/projects/lightbox2/

This is what I am trying to go for.
http://www.javascriptkit.com/script/...box/#location1

I am looking for some sort of image slider.
jscheuer1
11-25-2014, 04:16 AM
This time I'm leaving the broken link in your post so that you can see that it is broken. Please provide the actual link.
starr05
11-25-2014, 05:35 PM
Alright, I've found a different link of what I am trying to go for http://flexslider.woothemes.com/index.html

I've made my js file:


$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});



Html


<!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>
<title>Image Slider</title>
</head>
<body>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.png" />
</li>
<li>
<img src="slide2.png" />
</li>
<li>
<img src="slide3.png" />
</li>
<li>
<img src="slide4.png" />
</li>
</ul>
</div>

</body>
</html>



But when I run it, my pictures show up and don't slide.
starr05
11-25-2014, 05:44 PM
I just linked my .js file and .css, now I get an error that the $ is undefined in this piece of code:



$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
styxlawyer
11-25-2014, 08:54 PM
You need to have jQuery loaded to run that code.