PDA

View Full Version : Having trouble creating a basic jquery slideshow


Golden Child
05-24-2011, 04:32 PM
Hello,

I am a web design rookie. I am having trouble creating a basic jquery carousel slideshow using Galleria. You can visit their site here:

http://galleria.aino.se/

I followed the directions given on the site tutorial yet nothing comes up when I preview my slideshow in any browser. However, the three demo pictures I uploaded appear next to one another in the workspace in Dreamweaver. Can anybody look at my html and tell me what could be going wrong? :confused: Here's my 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"> <script src="../Desktop/galleria/galleria-1.2.3.js"></script>

<link href="untitled.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="gallery">
<ul>
<li> <img src="../Downloads/Harvest Carousel.jpg" width="479" height="328"/></li>
<li> <img src="../Downloads/Donate Carousel.jpg" width="479" height="329"/></li>
<li> <img src="../Downloads/Manifest Glory 4.jpg" width="479" height="328"/></li>
</ul>
</div>
<script type="text/javascript"><script src="../Desktop/galleria/themes/classic/galleria.classic.min.js">
</script>
<script>$("#gallery").galleria({
width: 479,
height: 328
</script>

</body>
</html>

mangofreak
05-24-2011, 05:58 PM
follow this guide:
http://galleria.aino.se/docs/1.2/getting_started/beginners_guide/
the example cited on their website does not use an unordered list, so why don't you change from this:

<div id="gallery">
<ul>
<li> <img src="../Downloads/Harvest Carousel.jpg" width="479" height="328"/></li>
<li> <img src="../Downloads/Donate Carousel.jpg" width="479" height="329"/></li>
<li> <img src="../Downloads/Manifest Glory 4.jpg" width="479" height="328"/></li>
</ul>
</div>

to this:

<div id="gallery">

<img src="../Downloads/Harvest Carousel.jpg" width="479" height="328"/>
<img src="../Downloads/Donate Carousel.jpg" width="479" height="329"/>
<img src="../Downloads/Manifest Glory 4.jpg" width="479" height="328"/>
</div>

Golden Child
05-24-2011, 06:08 PM
Thanks for a response. I changed that and I followed the tutorial to a tee and it still doesn't work.


<!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>Untitled Document</title>
<script type="text/javascript"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"> <script src="../Desktop/galleria/galleria-1.2.3.js"></script>
</head>

<body>
<div id="gallery">
<img src="../Downloads/Donate Carousel.jpg">
<img src="../Downloads/Harvest Carousel.jpg">
<img src="../Downloads/Manifest Glory 4.jpg">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
</script>
<script type="text/javascript">
<script>
$("#gallery").galleria({
width: 476,
height: 329
});
</script>

</body>
</html>

gentleone
05-24-2011, 06:09 PM
Your javascript calls are a bit weird. You have this:
<script type="text/javascript"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>Wich should be this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>I've deleted this part out of it:
> <scriptThe same goes for the other ones.

Golden Child
05-24-2011, 06:33 PM
Thanks again. I edited those scripts. But the slideshow is still not working. Here is my code now:

<!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>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="../Desktop/galleria/galleria-1.2.3.js"></script>
</head>

<body>
<div id="gallery">
<img src="../Downloads/Donate Carousel.jpg">
<img src="../Downloads/Harvest Carousel.jpg">
<img src="../Downloads/Manifest Glory 4.jpg">
</div>
<script type="text/javascript" src="../Desktop/galleria/themes/classic/galleria.classic.min.js">;
$("#gallery").galleria({
width: 476,
height: 329
});
</script>

</body>
</html>

I think the problem is this part of the code. What do you think? I can't figure out how it re-write it correctly.

<script type="text/javascript" src="../Desktop/galleria/themes/classic/galleria.classic.min.js">;
$("#gallery").galleria({
width: 476,
height: 329
});
</script>

mangofreak
05-24-2011, 06:39 PM
Try replacing what you need from this


<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="galleria/galleria-1.2.3.min.js"></script>

</head>
<body>
<script>
$("body").text("jQuery works");
</script>
<script>
if (Galleria) { $("body").text('Galleria works') }
</script>

<div id="gallery">

<img src="imgs_test/cover_image_sm.jpg" width="320" height="320"/>
<img src="imgs_test/aerialsm.jpg" width="320" height="320"/>
<img src="imgs_test/1Main-Photo-sm.jpg" width="320" height="320"/>

</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</body>
</html>


I tested it it works!

gentleone
05-24-2011, 06:41 PM
The last part should be this:

<script type="text/javascript" src="../Desktop/galleria/themes/classic/galleria.classic.min.js"></script>
<script type="text/javascript">
$("#gallery").galleria({
width: 476,
height: 329
});
</script>

gentleone
05-24-2011, 06:44 PM
Okay... better to follow Mangofreak's advise... I see that you miss a lot more in order to fire up that gallery.

Golden Child
05-24-2011, 06:53 PM
Hmmm. Still not working. All that shows up on the preview page in the browser is a blank page that says "Galleria works" at the top. Could it have something to do with my version of Dreamweaver? I'm using CS3 and it's been known to have some bugs. Here is my edited 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="../Desktop/galleria/galleria-1.2.3.js"></script>
</head>

<body>
<script>
$("body").text("jQuery works");
</script>
<script>
if (Galleria) { $("body").text('Galleria works') }
</script>
<div id="gallery">
<img src="../Downloads/Donate Carousel.jpg" width="479" height="329"/>
<img src="../Downloads/Harvest Carousel.jpg" width="479" height="329"/>
<img src="../Downloads/Manifest Glory 4.jpg" width="479" height="329"/>
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>

</body>
</html>

Golden Child
05-24-2011, 06:55 PM
Thanks everyone! It's working now!

mangofreak
05-24-2011, 07:50 PM
Oops yes, I missed the bottom values that originally you used. I just kept the Galleria values of 500px.

However, I'm glad it's now working.