Using JQuery and CSS to make an image gallery
Question
I have been up for quite awhile trying to figure this out. On this website http://css3.bradshawenterprises.com/slide1/ this gives me the code and everything and I have plugged it into my webpage just like it should be.
I updated it now this is my code can someone please help me with it...
<html>
<head>
<style type="text/css">
#slide1_controls span {
padding-right:2em;
cursor:pointer;
}
#slide1_container {
width:450px;
height:281px;
overflow:hidden;
position:relative;
}
#slide1_images {
position:absolute;
left:0px;
width:1800px;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
#slide1_images img {
padding:0;
margin:0;
float:left;
}
</style>
<script type="text/javscript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slide1-1").click(function() {
$("#slide1_images").css("left","0");
});
$("#slide1-2").click(function() {
$("#slide1_images").css("left","-450px");
});
$("#slide1-3").click(function() {
$("#slide1_images").css("left","-900px");
});
$("#slide1-4").click(function() {
$("#slide1_images").css("left","-1350px");
});
});
</script>
</head>
<body>
<div id="slide1_container">
<div id="slide1_images">
<img src="pictures/1.jpg" />
<img src="pictures/2.jpg" />
<img src="pictures/3.jpg" />
<img src="pictures/4.jpg" />
</div>
</div>
<p id="slide1_controls">
<span id="slide1-1">Image 1</span>
<span id="slide1-2">Image 2</span>
<span id="slide1-3">Image 3</span>
<span id="slide1-4">Image 4</span>
</p>
</body>
</html>
But no matter what I do I cannot get this to work and I really need it for my current website.
2 answers
solution1
5 ACCPTED 2012-04-21 06:27:34
include jquery file in your code.
<script src="jquery.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$("#slide1-1").click(function() {
$("#slide1_images").css("left","0");
});
$("#slide1-2").click(function() {
$("#slide1_images").css("left","-450px");
});
$("#slide1-3").click(function() {
$("#slide1_images").css("left","-900px");
});
$("#slide1-4").click(function() {
$("#slide1_images").css("left","-1350px");
});
});
</script>
<div id="slide1_container">
<div id="slide1_images">
<img src="/images/Cirques.jpg" />
<img src="/images/Clown%20Fish.jpg" />
<img src="/images/Stones.jpg" />
<img src="/images/Summit.jpg" />
</div>
</div>
<p id="slide1_controls">
<span id="slide1-1">Image 1</span>
<span id="slide1-2">Image 2</span>
<span id="slide1-3">Image 3</span>
<span id="slide1-4">Image 4</span>
</p>
solution2
0 2012-04-21 06:32:11
if you have not included jQuery file then you have to include also that to run this jQuery code.
$(document).ready(function() {
$("#slide1-1").click(function() {
$("#slide1_images").css("left","0");
});
$("#slide1-2").click(function() {
$("#slide1_images").css("left","-450px");
});
$("#slide1-3").click(function() {
$("#slide1_images").css("left","-900px");
});
$("#slide1-4").click(function() {
$("#slide1_images").css("left","-1350px");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.