logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-24-2011, 04:32 PM   #1
Golden Child
 
Join Date: May 2011
Posts: 45
Default Having trouble creating a basic jquery slideshow

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

Last edited by Golden Child; 05-24-2011 at 04:38 PM..
Golden Child is offline   Reply With Quote
Old 05-24-2011, 05:58 PM   #2
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

follow this guide:
http://galleria.aino.se/docs/1.2/get...ginners_guide/
the example cited on their website does not use an unordered list, so why don't you change from this:
Code:
<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:
Code:
<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>
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 05-24-2011, 06:08 PM   #3
Golden Child
 
Join Date: May 2011
Posts: 45
Default

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>
Golden Child is offline   Reply With Quote
Old 05-24-2011, 06:09 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Your javascript calls are a bit weird. You have this:
HTML Code:
<script type="text/javascript"> <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Wich should be this:
HTML Code:
<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:
HTML Code:
> <script
The same goes for the other ones.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-24-2011, 06:33 PM   #5
Golden Child
 
Join Date: May 2011
Posts: 45
Default

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.

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

Last edited by Golden Child; 05-24-2011 at 06:37 PM..
Golden Child is offline   Reply With Quote
Old 05-24-2011, 06:39 PM   #6
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default

Try replacing what you need from this
Code:
<!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!
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Old 05-24-2011, 06:41 PM   #7
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

The last part should be this:
HTML Code:
<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>
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-24-2011, 06:44 PM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Okay... better to follow Mangofreak's advise... I see that you miss a lot more in order to fire up that gallery.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-24-2011, 06:53 PM   #9
Golden Child
 
Join Date: May 2011
Posts: 45
Default

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 is offline   Reply With Quote
Old 05-24-2011, 06:55 PM   #10
Golden Child
 
Join Date: May 2011
Posts: 45
Default

Thanks everyone! It's working now!
Golden Child is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:12 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com