Portal Engine Questions on portal engine and web parts.
Version 5.x > Portal Engine > Lazyload On Kentico Lightbox View modes: 
User avatar
Member
Member
izzuddin-istar.com - 10/24/2010 10:55:52 AM
   
Lazyload On Kentico Lightbox
Ok Issue:

i tried to implement Lazyload which is to optimise our bandwidth by loading images while we scrolling the content. it detects all <img> tag and apply the script loading. kinda cool

library example:
http://www.appelsiini.net/projects/lazyload
ps: dont bother bout current issue on their side regarding that script is obsolete, coz it still work.

so this lazyload using jQuery and your lightbox using prototype if not mistaken.

i have made the changes by replacing my code of $() to jQuery() so all my script works fine in other page it load by scrolling and bandwidth optimization works beautifully. i Apply the code under masterpage coz to ensure it detects all <img> tags

#BUT# when it comes to my gallery page which has lightbox it load ok but when i started scroll coz at the bottom gallery got <img> tag somemore, it conflict with the prototype library and came out with this weird error

/CMSScripts/prototype.js [invalid array length]
it points to this line : 464 col 1 this.length--;

maybe u can replicate my code. with following script in masterpage
and one of the page template has jquery lightbox


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function() {jQuery("img").lazyload({placeholder:"img/grey.gif",effect:"fadeIn"});});
</script>


so in jquery.lazyload.jz ive replace $ to jQuery

Thank You Again

User avatar
Kentico Support
Kentico Support
kentico_zdenekc - 11/12/2010 7:12:08 AM
   
RE:Lazyload On Kentico Lightbox
Hi,

the main problem here is in usage of our LightBox, because it's built on prototype.js library and this library changes js objects like array, string and so, causing this issue.
In short, it won't be possible to run the jQuery with Lightbox reliably.

Solution is to use different <whatever>box, like FancyBox or ThickBox... built upon jQuery. It is a little bit difficult, because Lightbox is well integrated to work easily in our transformations, anyway it is possible.

We are preparing a jQuery version of Lightbox in the future, however I cannot guarantee any date it will be available, so I suggest to use another -box library for now.

Thank you for understanding.

Regards,
Zdenek