JQuery/Galleria plug-in problem
Hi, I have downloaded JQuery and the Galleria plug-ins and the HTML text from the Demo 1 source on
http://devkick.com/lab/galleria/
and cannot for the life of me make it work.
The installation looked very easy (good job as this is my first website, hence why I am hoping this is something easy to fix!) The only change i am making is to re-link the picture to my images and it brings the image up but not the title and it does not link when i view it in my browser to the main image or scroll as thumbnails! (the images are just placed under one another vertically with the <div id="main_image"></div> just blank
Here is the source code, please can someone help me i have been looking at this for 2 days now and cannot get anywhere! I would upload it to my website but it doesn't look very professional, I can email someone the files if that would help..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.pack.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>
<style media="screen,projection" type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}
.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}
</style>
</head>
<h1><img src="/images/logo.jpg" alt="logo" width="577" height="111"></h1>
<h1>Nikki Martin</h1>
<div class="demo">
<div id="main_image"></div>
<ul class="galleria">
<li><img class="noscale" src="images/Thumbnails/landscape1.jpg" title="A caption" alt="Image01"></li>
<li><img class="noscale" src="images/Thumbnails/landscape2.jpg" title="A caption" alt="Image01"></li>
<li><img class="noscale" src="images/Thumbnails/landscape3.jpg" title="A caption" alt="Image01"></li>
<li><img class="noscale" src="images/Thumbnails/landscape4.jpg" title="A caption" alt="Image01"></li>
<li><img class="noscale" src="images/Thumbnails/landscape5.jpg" title="A caption" alt="Image01"></li>
<li><img class="noscale" src="images/Thumbnails/landscape6.jpg" title="A caption" alt="Image01"></li>
<li><img class="noscale" src="images/Thumbnails/landscape7.jpg" title="A caption" alt="Image01"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>
</div>
<div class="info">