Progressive loading with Cycle2 plugin [SOLVED]

wmdvanzyl · Post by **wmdvanzyl** » Tue Jun 16, 2015 10:22 am

Hi All.

UPDATE: SEE BOTTOM

I am trying to set up progressive image loading on a gallery using the cycle2 plugin.

The plugin supports it

I have this inside the Gallery Template:

Code: Select all

<div class="cycle-slideshow" data-cycle-speed="600" data-cycle-timeout="6000" data-cycle-loader=true data-cycle-progressive="slider" pause-on-hover="true">
    <img src="uploads/images/Gallery/home_slider/DSC_4414.JPG"/>
</div>
<!--div id="captionThree">&nbsp;</div-->

<__script__ id="slider" type="text/cycle">
    {foreach from=$images item=image}
    	{if !$image->isdir}
    		<img src="{$image->thumb}" alt="{$image->titlename}" />
    	{/if}
    {/foreach}
</__script>

So i have one image displaying when the site starts up and then the library will load the others from within the script tags.

However, it expects a list of images formatted as follows:

Code: Select all

<__script__ id="slider" type="text/cycle">
    <img src="uploads/images/GalleryThumbs/45-15.jpg" alt="IMG-20141103-WA0000.jpg" />
    <img src="uploads/images/GalleryThumbs/44-15.jpg" alt="IMG-20140926-WA0001.jpg" />
    <img src="uploads/images/GalleryThumbs/46-15.jpg" alt="IMG-20141031-WA0011.jpg" />
    <img src="uploads/images/GalleryThumbs/61-15.JPG" alt="DSC_4367.JPG" />    	
</__script>

Since i am using Smarty to create that list i am getting the following result:

Code: Select all

<__script__ id="slider" type="text/cycle">
<![CDATA[
        <img src="uploads/images/GalleryThumbs/45-15.jpg" alt="IMG-20141103-WA0000.jpg" />
    	 <img src="uploads/images/GalleryThumbs/44-15.jpg" alt="IMG-20140926-WA0001.jpg" />
    	 <img src="uploads/images/GalleryThumbs/46-15.jpg" alt="IMG-20141031-WA0011.jpg" />
    	 <img src="uploads/images/GalleryThumbs/61-15.JPG" alt="DSC_4367.JPG" />    	        	    		
    	    ]]>
</__script>

I don't know enough about smarty to prevent those CDATA tags from showing.

Is there another way to do this? Or perhaps prevent CDATA tags from showing?

Had the following in the template:

Code: Select all

{cgsi_convert}{$one}{/cgsi_convert}

That's what was causing the CDATA tags. Removed the CGSmartImage call and now it looks as follows:

Code: Select all

<div style="position: relative;" class="cycle-slideshow" data-cycle-speed="600" data-cycle-timeout="6000" data-cycle-loader="true" data-cycle-progressive="slider" pause-on-hover="true"><img class="cycle-slide cycle-sentinel" style="visibility: hidden; position: static; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block;" src="uploads/images/GalleryThumbs/58-15.JPG">
    
<img class="cycle-slide cycle-slide-active" style="visibility: visible; position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block;" src="uploads/images/GalleryThumbs/58-15.JPG"></div>
<__script__ id="slider" type="text/cycle">
        	    		<img src="uploads/images/GalleryThumbs/45-15.jpg" alt="IMG-20141103-WA0000.jpg" />
    	        	    		<img src="uploads/images/GalleryThumbs/44-15.jpg" alt="IMG-20140926-WA0001.jpg" />
    	        	    		<img src="uploads/images/GalleryThumbs/46-15.jpg" alt="IMG-20141031-WA0011.jpg" />
    	        	    		<img src="uploads/images/GalleryThumbs/61-15.JPG" alt="DSC_4367.JPG" />
    	        	    		<img src="uploads/images/GalleryThumbs/48-15.jpg" alt="IMG-20141031-WA0008.jpg" />
    	        	    		<img src="uploads/images/GalleryThumbs/43-15.jpg" alt="IMG-20141012-WA0005.jpg" />
    	        	    		<img src="uploads/images/GalleryThumbs/41-15.jpg" alt="IMG-20141104-WA0007.jpg" />
    	        	    		<img src="uploads/images/GalleryThumbs/58-15.JPG" alt="DSC_4414.JPG" />
    	        	    		<img src="uploads/images/GalleryThumbs/56-15.JPG" alt="DSC_4417.JPG" />
    	        	    		<img src="uploads/images/GalleryThumbs/38-15.jpg" alt="IMG-20141012-WA0009.jpg" />
    	        	    		<img src="uploads/images/GalleryThumbs/39-15.jpg" alt="IMG-20141121-WA0006.jpg" />
    	        	    		<img src="uploads/images/GalleryThumbs/40-15.jpg" alt="IMG-20140926-WA0000.jpg" />
    	        	    		<img src="uploads/images/GalleryThumbs/55-15.jpg" alt="20130110_115432.jpg" />
    	    </__script>

So all seems good. BUT it doesn't work. Has anyone gotten this to work? Or perhaps suggest a different approach?

UPDATE: Forgot the '#' as in #slider

Code: Select all

<div style="position: relative;" class="cycle-slideshow" data-cycle-speed="600" data-cycle-timeout="6000" data-cycle-loader="true" data-cycle-progressive="#slider" pause-on-hover="true">