jquery gallery

edgich · 01-09-2013, 12:48 PM

I've been self learning Javascript and jquery and i know a little bit. I want to put it to practice and create a jquery sliding gallery?

i found the jquery cycle plugin but i cant get it to work.

$(document).ready(init);

function init() {
$(".class").cycle();
}

what is the init Fn , is is a js built in Fn??

VIPStephan · 01-09-2013, 04:32 PM

init is the function you created after the document.ready. It just says “run the function called ‘init’ when the DOM is ready”, you could as well write it like:

PHP Code:


			
$(document).ready(function() {

  $('.class').cycle();

});

Which is the usual way it’s done. But there’s even a shortcut for this, just write:

PHP Code:


			
$(function() {

  // JS code here

});

Now, in order to tell you why your slideshow isn’t working we need to see your HTML, too. What does the JS error console say?

edgich · 01-12-2013, 12:41 PM

Here's my HTML...i used some random pics i googled...i still can't get it to work

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

</head>

<body>
<script type="text/javascript">
$(document).ready(function(){
$('.pics').cycle('fade');
});

</script>
<div class="pics">
<img src="http://cdni.tutorialchip.com/wp-content/uploads/2012/01/music-players-for-websites-200x200.jpg" width="200" height="200" />
<img src="http://cbswxrt2.files.wordpress.com/2012/06/bernie-movie-poster-200x200.jpg?w=300" width="200" height="200" />
<img src="http://upload.wikimedia.org/wikipedia/en/f/f6/Eons-globe-RGB-200x200.jpg" width="200" height="200" />
</div>
</body>

edgich · 01-13-2013, 06:14 AM

I got it working....i love jquery.