Jump to content

Dynamic Content on product page using Scroll on javascript


Recommended Posts

I would like to share here a little javascript-based code that adds on dynamic form the images on the product page aiming an improvement in page load.
 
The following excerpt is the demonstration with images, but can be changed to any type of content
 
 
In themes/mytheme/product.tpl
 
Add the following script in begin the file 

var imagens = []; //array to image links
var counter = 0;
function dynImage(){
	var wrap = document.getElementById('content-sub');
	var contentHeight = wrap.offsetHeight;  //returns the viewable height of an element in pixels
	var yOffset = window.pageYOffset; //returns the pixels the current document has been scrolled from the upper left corner of the window, horizontally and vertically.
	var y = yOffset + (window.innerHeight/4);
	if(counter < imagens.length){
		if(y >= contentHeight){
			caramba = imagens[counter].replace("small", "thickbox");
			wrap.innerHTML += '<div class="newData"><img src='+caramba+' class="imageFloatLeft"></div>';
			counter++;
		}
	}
	
}
window.onscroll = dynImage;

function loadimage(id_image){
	boost = "thumb_"+id_image;
	imagens.push(document.getElementById(boost).src);
}

Search on archive the ul with id="thumbs_list_frame"

 

On tag img into ul id="thumbs_list_frame" put the code onload="loadimage({$image.id_image})"

 

and add <div id="content-sub"></div> in the place you want the images to be loaded

 

So when the scroll achieve a measure of pixels, the images will be loaded into tpl

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More