Forums / Setup & design / View Slideshow by default

View Slideshow by default

Author Message

Andy Woods

Wednesday 18 May 2011 3:25:31 am

I have a gallery with images in it.

Is it possible to display the slideshow by default when visiting the page rather than having to click on the 'View as slideshow' link?

Thanks,

Andy

Veronique Jamilloux

Thursday 19 May 2011 2:21:45 am

Hi,

In my home page have a slide show using a javascript :

 // Lister ci-dessous toutes les images qui vont s'afficher

NewImg = new Array (
"images/ble_centre.jpg",
"images/dnoxia_centre.jpg",
"images/riz_centre.jpg",
"images/botrytis_centre.jpg",
"images/mais_centre.jpg",
"images/muscadine_centre.png"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 2000;

var lock = false;
var run;

function chgImg(direction) {
    if (document.images) {
        ImgNum = ImgNum + direction;
        if (ImgNum > ImgLength) {
            ImgNum = 0;
        }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (ImgNum < 0) {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ImgNum = ImgLength;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; document.slideshow.src = "/design/urgi/" + NewImg[ImgNum];
&nbsp;&nbsp; }
}

function auto() {
&nbsp;&nbsp;&nbsp; if (lock == true) {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; lock = false;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; window.clearInterval(run);
&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; else if (lock == false) {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; lock = true;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; run = setInterval("chgImg(1)", delay);
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
}

In my template where I define the <body> tag, I put

&nbsp;<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" {if eq($currentNode.node_id,$Root_Node)}onload="auto();"{/if}>

This is my case, may be it will help you.

Bye

VĂ©ronique

URGI - INRA
Webmaster
Route de Saint Cyr
78000 Versailles

Andy Woods

Thursday 19 May 2011 7:57:20 am

Hi Veronique,

Thanks for your post.

I chose to copy the slideshow code from the ezwebin image.tpl instead and add it to my gallery.tpl.  I just needed to change the fetch statements a little so that the parent node_id wasn't selected.

{def $sort_order=$node.parent.sort_array[0][1]
     $sort_column=$node.parent.sort_array[0][0]
     $sort_column_value=cond( $sort_column|eq( 'published' ), $node.object.published,
                             $sort_column|eq( 'modified' ), $node.object.modified,
                             $sort_column|eq( 'name' ), $node.object.name,
                             $sort_column|eq( 'priority' ), $node.priority,
                             $sort_column|eq( 'modified_subnode' ), $node.modified_subnode,
                             false() ) }
{if $sort_column_value|eq( false() )}
    {set $sort_column_value = $node.object.published
         $sort_column = 'published'}
{/if}
{def
    $previous_image = fetch( 'content', 'list', hash( 'parent_node_id', $node.node_id,
                                                       'class_filter_type', 'include',
                                                       'class_filter_array', array( 'image' ),
                                                       'limit', '1',
                                                       'attribute_filter', array( 'and', array( $sort_column, $sort_order|choose( '>', '<' ), $sort_column_value ) ),
                                                       'sort_by', array( array( $sort_column, $sort_order|not ), array( 'node_id', $sort_order|not ) ) ) )
     $next_image = fetch( 'content', 'list', hash( 'parent_node_id', $node.node_id,
                                                   'class_filter_type', 'include',
                                                   'class_filter_array', array( 'image' ),
                                                   'limit', '2',
                                                   'attribute_filter', array( 'and', array( $sort_column, $sort_order|choose( '<', '>' ), $sort_column_value ) ),
                                                   'sort_by', array( array( $sort_column, $sort_order ), array( 'node_id', $sort_order ) ) ) ) }  
<div class="content-view-full">
    <div class="class-image">
        <div class="attribute-header">
            <h1>{$next_image[0].name|wash()}</h1>
        </div>
        {if is_unset( $versionview_mode )}
        <div class="content-navigator">
            {if $previous_image}
                <div class="content-navigator-previous">
                    <div class="content-navigator-arrow">&laquo; </div><a href={$previous_image[0].url_alias|ezurl} title="{$previous_image[0].name|wash}">{'Previous image'|i18n( 'design/ezwebin/full/image' )}</a>
                </div>
            {else}
                <div class="content-navigator-previous-disabled">
                    <div class="content-navigator-arrow">&laquo; </div>{'Previous image'|i18n( 'design/ezwebin/full/image' )}
                </div>
            {/if}
            {if $previous_image}
                <div class="content-navigator-separator">|</div>
            {else}
                <div class="content-navigator-separator-disabled">|</div>
            {/if}
            {def $parent=$next_image[0].parent}
                <div class="content-navigator-forum-link"><a href={$parent.url_alias|ezurl}>{$parent.name|wash}</a></div>
            {if $next_image[0]}
                <div class="content-navigator-separator">|</div>
            {else}
                <div class="content-navigator-separator-disabled">|</div>
            {/if}
            {if $next_image[1]}
                <div class="content-navigator-next">
                    <a href={$next_image[1].url_alias|ezurl} title="{$next_image[1].name|wash}">{'Next image'|i18n( 'design/ezwebin/full/image' )}</a><div class="content-navigator-arrow"> &raquo;</div>
                </div>
            {else}
                <div class="content-navigator-next-disabled">
                    {'Next image'|i18n( 'design/ezwebin/full/image' )}<div class="content-navigator-arrow"> &raquo;</div>
                </div>
            {/if}
        </div>
        {/if}
        <div class="attribute-image">
            <p>{attribute_view_gui attribute=$next_image[0].data_map.image image_class=imagelarge}</p>
        </div>
        <div class="attribute-caption">
            {attribute_view_gui attribute=$next_image[0].data_map.caption}
        </div>
        {include uri='design:parts/image/related_content.tpl'}
    </div>
</div>