1

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.

  • add this after loading jquery <script>jQuery.noConflict();</script> and change your code from $("img.lazy") to jQuery("img.lazy") – Ahmed Elawadi Jan 14 '16 at 11:06
  • Thank you Ahmed, If i add jQuery("img.lazy") instead of $("img.lazy") its says jQuery lazyload is not a function.But i did not try adding this <script>jQuery.noConflict();</script> at the end.Ill try this.i added this line before the code. – Mujahidh Jan 14 '16 at 11:09
  • 1
    first you have to remove conflict from this file <script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery.lazyload.js?v=1.9.7'); ?>"></script> replace $ with jQuery add jQuery = jQuery.noConflict(); – Qaisar Satti Jan 15 '16 at 5:29
  • 2
    I'm voting to close this question as off-topic because this is about a javascript conflict between jQuery and Prototype on a custom library – Sander Mangel Jan 16 '16 at 12:34
  • 1
    I have answered it and want to leave it open as this is a very common problem in Magento. Prototype = Magento, so on topic. jQuery is used by many and many have experienced the Prototype/jQuery conflict ;) – 7ochem Jan 16 '16 at 13:02
4

Magento uses Prototype JS which has already claimed the $ variable. You need to use jQuery in "no conflict" mode so jQuery won't also claim the $ variable:

<script>
jQuery.noConflict();
</script>

After this, you cannot use $() to use jQuery, because then you call Prototype. You have to use the full name: jQuery(). You can change your self written scripts by:

  1. Replacing all uses of $ by jQuery
  2. Wrap your scripts in an anonymous function passing jQuery as a parameter:

    (function($) {
         // You can simply use $ here
         $('selector').dosomething();
    })(jQuery);
    

The jquery.lazyload.js library is well written and is able to operate in both normal mode and conflict mode. There's no need to change the files of this library (replacing all uses of $ by jQuery) as it is already making use of the anonymous function method, see jquery.lazyload.js:

16.  (function($, window, document, undefined) {
17.      var $window = $(window);
18.  
19.      $.fn.lazyload = function(options) {

             // *SNIP* (lots of code...)

240.     });
241. 
242. })(jQuery, window, document);
  • Thank you @7ochem,As we have weekend in dubai unable to check your answer.Ill check this. – Mujahidh Jan 17 '16 at 5:57
1

For the future user i am updating the answer how i short it out this issue. I added a no conflict like below.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!--ADD BELOW LINE------------------------->
<script type="text/javascript">
    var jQuery_1_10_2 = $.noConflict(true);
</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">
//-----------Replaced the "$" to "jQuery_1_10_2"
    jQuery_1_10_2(function() {
      jQuery_1_10_2("img.lazy").lazyload({
        effect : "fadeIn"
      });
   });
</script>

And Edit the jquery.lazyload.js.

Replace $.fn.lazyload = function(options) {

With

jQuery_1_10_2.fn.lazyload = function(options) {

I hope this will help to some one in future.

  • Why does normal no-conflict not work? Like: jQuery.noConflict();. That's all. And then just use jQuery() instead of $() (not some jQuery_1_10_2). Because then you don't have to change the lazyload library. Or do you have multiple jQuery versions running? – 7ochem Jan 20 '16 at 12:50
  • I have different version in my website.i tried several ways and this way used to short out the issue.I am not clear to answer why the normal no-conflict not work for me. – Mujahidh Jan 20 '16 at 12:58
  • Ok, one more comment: To fix lazyload, don't do it like you did now. Please change the last line of the file and replace (jQuery, window, document) with (jQuery_1_10_2, window, document). That is the best way – 7ochem Jan 20 '16 at 12:59
  • If i use like this don't i need to add like this. 'jQuery_1_10_2(function() { jQuery_1_10_2("img.lazy").lazyload({ effect : "fadeIn" }); });' Really thank you for your help. – Mujahidh Jan 20 '16 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.