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.

Code:

<!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

Originally Posted by jscheuer1

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:

Code:

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

Html

Code:

<!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:

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.

Thread: Javascript Image Viewer

Thread Tools

Search Thread

Javascript Image Viewer

Similar Threads

Integrating Facebox Image Viewer with Carousel Viewer

Image Thumbnail Viewer II + javascript disabled accessibility

image thumbnail viewer II (set image sizes, default image)

Javascript Fade In/Out Image Viewer

Combine Image Viewer and Image Viewer II

Bookmarks

Bookmarks

Posting Permissions