Hi everyone,
I get some hints how to start this whole idea (you can read it here: http://stackoverflow.com/questions/18471187/loading-a-new-page-with-sliding-animation-in-silverstripe-3-with-ajax) and have now a website which loads the content with ajax and slide the background image if you click on a menu link..but I still don't know how to get the next background image (..at the moment I just slide the same picture..). where should I put the code of the background image? inside the ajax/content template? and how can I get the bg image of each page (which is never the same)?
What I have done until now:
1. I created a template for my pages to be loaded via ajax ("AjaxPage.ss"), containing only the content I'll update on page change, so no <header> etc...my background image code is also not in this template..the bg code looks like this:
<div id="BgSlideWrapper">
<div id="slideInner">
<div id="BgContainer" class="slide" style="background : url($Photo.URL) no-repeat 0 0 #fff;background-size:cover;"> </div>
</div>
</div>
2. in my Page.php I have this:
public function index() {
if(Director::is_ajax()) {
return $this->renderWith("AjaxPage");
} else {
return Array();
}
}
3. In my Page.ss I use jQuery's ajax function "load" when somebody click on a menu link and then slide the background image:
$('a').click(function(e){
var a = $(this);
var href = a.attr('href');
//copy the background image div tag and set it right to the original one (out of sight)
var area = $('#BgContainer');
var newArea = area.clone().attr('id', 'BgContainerNext').insertAfter(area);
newArea.css( "marginLeft", screenwidth );
$('#PageWrapper').load(href, function() { //get content via ajax
$('#slideInner').animate({marginLeft: -screenwidth},{
//slide both ('#BgContainer and #BgContainerNext) to the left side
easing: 'swing',
duration: 'slow',
complete: function(){ //delete the first(original) bg image div and "reset" the #slideInner div
area.remove();
newArea.css("marginLeft", "0px").attr('id', 'BgContainer');
$('#slideInner').css("marginLeft", "0px");
area = newArea;
}});
});
e.preventDefault();
});
That's it. Now I really need some help, please! :/
