I’m trying to get a working AJAX slideshow of my products. Instead
of
just having the specified div being replaced just by the html in
slideshow.rhtml, the div is replaced by the entire store layout.
Mainly I think it’s a page inheritance problem that I have. The
action, “store/slideshow”, aquires the layout of “store” when I don’t
want it to. Does anyone have any suggestions on how to bypass this
problem or any alternative ways of doing this, so that it just
injects
the rhtml from slideshow.rhtml?
Here is the script that I have:
var album = {
startup: function() {
new PeriodicalExecuter(album.cycle, 5) // change image every 5
seconds
},
cycle: function() {
new Effect.Fade(‘store-random-item’, { // the id of the
containing the photos
duration: 1,
fps: 50,
afterFinish: function() {
new Ajax.Updater(‘store-random-item’,’/store/slideshow’, { //
URL for next tag
asynchronous: true,
onSuccess: function() {
new Effect.Appear(‘store-random-item’, {
duration: 1,
fps: 50,
queue:‘end’
})
}
})
}
})
}
}
window.onload = album.startup
Here is my slideshow.rhtml page:
<div id="store-random-item">
<h3><%= @slideshow.title %></h3>
<img src="<%= @slideshow.image_url1.thumb.url %>
</div>
Here is my layout page:
Garagesale-R-Us.com <%= stylesheet_link_tag "garage", "scaffold", :media => "all" %> <%= javascript_include_tag :defaults %> <%= javascript_include_tag 'slideshow' %> </head>
<body>
<div id="container">
<div id="banner">
<%= image_tag
“header.jpg”, :alt => @page_title || “Garagesale-R-
Us” %>
Your garage sale superstore!
<%= render 'store/slideshow' %>
</div>
</div>
</body>
Here is the slideshow method in my store controller:
def slideshow
render (:layout=>false)
@products = Product.find(:all)
@number = (Product.count - 1)
@slideshow = @products[rand(@number)]
end