I'm attempting to create a slideshow using jQuery and have the images stored in an array. However, I'm struggling with the implementation of the slideshow functionality. I've checked out 'http://jquery.malsup.com/cycle/' for guidance, but I'm still unsure about the process.
Also, in the views>layouts>application section
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#shuffle').cycle({
fx: 'shuffle',
delay: -4000
});
});
To display the photos individually:
<div id="shuffle">
<% @building.building_photos.each do |photo| %>
<%= link_to (image_tag (photo.photo.url)), @building %>
<% end %>
</div>
UPDATE 1(source code)
<!DOCTYPE html>
<html>
<head>
<title>Welcome to koshbay</title>
<link href="/assets/all.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/about.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/addphotos.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/admin.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/buildings.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/contact.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/forrent.css?body=1" media="all" rel="stylesheet" type="text/css" />
...
If you have any suggestions on how I can achieve this task (as it's my first time working with jQuery), please share your insights.