Skip to content

Instantly share code, notes, and snippets.

@lamprosg

lamprosg/Main.php

Created April 19, 2012 10:14
Show Gist options
  • Save lamprosg/2420094 to your computer and use it in GitHub Desktop.
Save lamprosg/2420094 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Image Slideshow using JQuery Cycle
Raw
cycle.js
// JQuery: http://jquery.com
// Cycle plugin: http://malsup.com/jquery/cycle/
$(document).ready(function() {
$("#slideshow").css("overflow", "hidden"); //Hide scrollbars if javascript is enabled
$("ul#slides").cycle({ //Fade transition
fx: 'fade',
pause: 1,
prev: '#prev', //Which elements will be used for the navigation buttons.
next: '#next'});
$("#slideshow").hover(function() {
$("ul#nav").fadeIn();
},
function() {
$("ul#nav").fadeOut();
});
});
Raw
Main.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slideshow</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="cycle.js"></script>
</head>
<body>
<!-- The slideshow div -->
<div id="container">
<h1>Harley Davidson Motor Cycles</h1>
<div id="slideshow">
<ul id="nav">
<li id="prev"><a href="#">Previous</a></li>
<li id="next"><a href="#">Next</a></li>
</ul>
<ul id="slides">
<li><img src="images/slide1.jpg" alt="Harley Davidson Sportster" /></li>
<li><img src="images/slide2.jpg" alt="Harley Davidson Sportster" /></li>
<li><img src="images/slide3.jpg" alt="Harley Davidson Sportster" /></li>
<li><img src="images/slide4.jpg" alt="Harley Davidson Sportster" /></li>
<li><img src="images/slide5.jpg" alt="Harley Davidson Sportster" /></li>
</ul>
</div>
</div>
<!-- Slideshow div ends -->
</body>
</html>
Raw
style.css
body, h1, ul, li {
margin: 0; padding: 0; border: 0;
}
body {
background: #e8dbcb url(images/bg-texture.jpg);
}
#container {
width: 1095px; margin: -40px auto -40px auto;
position: relative;
}
h1 {
width: 262px; height: 226px; margin: 0 auto 0 auto; position: relative; top: 100px;
background: url(images/harley-logo.png); text-indent: -9999px; z-index: 10;
}
div#slideshow {
width: 1083px; height: 518px; padding: 15px 0 0 12px;
background: url(images/border.png);
overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */
position: relative; z-index: 5;
}
div#slideshow ul#nav {
display: none;
list-style: none;
position: relative; top: 210px; z-index: 15;
}
div#slideshow ul#nav li#prev {
float: left; margin: 0 0 0 40px;
}
div#slideshow ul#nav li#next {
float: right; margin: 0 50px 0 0;
}
div#slideshow ul#nav li a {
display: block; width: 80px; height: 80px; text-indent: -9999px;
}
div#slideshow ul#nav li#prev a {
background: url(images/prev.png);
}
div#slideshow ul#nav li#next a {
background: url(images/next.png);
}
div#slideshow ul#slides {
list-style: none;
}
div#slideshow ul#slides li {
margin: 0 0 20px 0;
}
@lamprosg
Copy link
Author

Very cool cycle slideshows here: http://www.backslash.gr/content/blog/webdevelopment/2-create-beautiful-slideshows-with-jquery-cycle

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment