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"> </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>
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>
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>
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}
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>
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">