I implement jquery lazyloads to load product images on scrolling..
I added the following codes to view.phtml
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery.lazyload.js?v=1.9.7'); ?>"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
</script>
<?php foreach ($galleryCollection as $_image): ?>
<img class="lazy products" data-original="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->keepFrame(false)->resize(426,700); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'image'), null, true);?>" />
<?php endforeach; ?>
The out put is fine as i expected.Images are loading on scroll. BUT Unable to click the magento view option button. Code for view option button click is below.
<script type="text/javascript">
Event.observe($('show_bundle_options'),"click",function(){
$('bundle_options').show();
$('bundle_options_background').show();
});
</script>
I can understand that this is jQuery conflict.I tried several ways to add jQuery.noConflict();
its not working.
If the options works fine images are not loading if the images load Options are not working.
Is there any other ways to load the image on scrolling the page?
I am using magento 1.7 version.
Please help me to sort it out.
<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery.lazyload.js?v=1.9.7'); ?>"></script>
replace $ with jQuery addjQuery = jQuery.noConflict();
– Qaisar Satti Jan 15 '16 at 5:29