my question is the following ,i have a dynamic page that fetches images from the database for my products. I display 14 products with sub-product images over here : " http://www.14u-fashion.com/shop/cat/65 ". I want to remove the arrows and made it an infinity scroll , i used this library : "github.com/paulirish/infinite-scroll" , everything works fine (working here "dokimastiko.14u-fashion.com/shop/cat/65") but when i load more content on scroll the javascript that makes the images turn (and the arrows on each product 'clickable') doesn't carry on. My code so far is this
$o . ="$('#catview').infinitescroll({
navSelector:'div.nextPage',
nextSelector:'div.nextPage a:first',
itemSelector:'#catview div.loadPage',
loading:
{
finishedMsg: '',
msgText: '',
img : '/../../../images/loading.gif',
},
debug:true;
animate: true,
});
";
Any way to make it work with javascript? I tried with pathParse but even more errors occur
make your js code that makes images turn into a function and use the optional callback $(elem).infinitescroll(options,[callback])
to call the function again
Something like this:
function codeForImageTurn(){
//turn image, click stuff
}
//run once when page load
codeForImageTurn();
//add as callback everytime scroll elements are added so it will re-run
$o. = "$('#catview').infinitescroll({
navSelector:'div.nextPage',
nextSelector:'div.nextPage a:first',
itemSelector:'#catview div.loadPage',
loading:
{
finishedMsg: '',
msgText: '',
img : '/../../../images/loading.gif', //starting with `/` means root, you can't go anything up
},
debug:true;
animate: true,
},function(){
codeForImageTurn();
});
";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.