I'm using the JQuery "scrollable" tool to make an image gallery. I use a Mac, so I used a MAMP local testing server to preview the gallery. When using both "Preview in Browser" and Live View, none of the dynamic elements I set up worked. I tried copying the page source for one of JQuery's standalone demos into a Dreamweaver document and viewing it on the testing server. None of the dynamic elements worked in that case either. This makes me think that the problem probably might not be caused by an error in my coding. Is there a setting in Dreamweaver's preferences that is preventing the dynamic elements from working?
<!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>
<link href="CSS/glennthomas.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js"></script>
<style type="text/css">
<!--
#galleryscroll {
width: 200px;
overflow: hidden;
}
.scrollable {
position: relative;
overflow:hidden;
width: 100%;
height: 630px;
}
.scrollbutton {
display: block;
margin-left: auto;
margin-right: auto;
}
.items {
position: relative;
width: 100%;
height: 2000em;
}
.items div {
height: 630px;
}
.items div img {
width: 120px;
display: block;
margin: 5px auto 0px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="navbanner"> <img id="logo" src="images/graphics/logo3.png" width="600" />
<div id="navbar">
<ul id="nav">
<li class="current"><a href=#>home</a></li>
<li class="noncurrent"><a href=#>the music</a></li>
<li class="noncurrent"><a href=#>photos</a></li>
<li class="noncurrent"><a href=#>sign up</a></li>
</ul>
</div>
</div>
<div id="maincontent">
<div id="galleryscroll">
<a class="prev"><img class="scrollbutton" src="images/graphics/scrollup.png" width="30" /></a>
<div id="scrollable" class="scrollable">
<div class="items">
<div>
<img src="images/gallery/_MG_9765thumb.jpg" />
<img src="images/gallery/_MG_9780thumb.jpg" />
<img src="images/gallery/_MG_9857thumb.jpg" />
<img src="images/gallery/_MG_9880thumb.jpg" />
<img src="images/gallery/_MG_9881thumb.jpg" />
</div>
<div>
<img src="images/gallery/_MG_9927thumb.jpg" />
<img src="images/gallery/_MG_9950thumb.jpg" />
<img src="images/gallery/_MG_9953thumb.jpg" />
<img src="images/gallery/_MG_9961thumb.jpg" />
<img src="images/gallery/IMG_0015thumb.jpg" />
</div>
<div>
<img src="images/gallery/IMG_9973thumb.jpg" />
<img src="images/gallery/thumb.jpg" />
</div>
</div>
</div>
<a class="next"><img class="scrollbutton" src="images/graphics/scrolldown.png" width="30" /></a>
</div>
</div>
<div id="footer">
<p class="subtext"> <span><a href=#>Privacy Policy</a></span> <span> | Other footer info</span> </p>
</div>
</div>
<script>
$(function() {
// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true });
});
</script>
</body>
</html>
Message was edited by: alexr62
