Jahia in English > Change the banner...

0 (0 Good)
0 (0 Bad)

Change the banner rotation time

by  muristan »  2012/11/25 22:38

I would like to change the banner rotation time in Jahia 6.61 CE web-space template. File and line?

Thanks!!

Andreas Keller

  (muristan)

Number of messages  24
Registration date
0 (0 Good)
0 (0 Bad)

Re: Change the banner rotation time

by  shyrkov »  2012/11/26 17:25

Hello Andreas,

the banner is implemented as a content list with a special view. You can see in the Studio that the illustration area has a "easySlider-content" view:

screenshot

The following JSP corresponds to the veiew: <jahia-web-app>/modules/default/jmix_list/html/list.easySlider-content.jsp

This one is in turn uses the jQuery's easySlider plugin (with default settings) to display a slider on the div with the ID "slider2":

<div id="slider2">
    <ul>
        <c:forEach items="${moduleMap.currentList}" var="child" varStatus="status">
            <li>
                <template:module node="${child}"/>
            </li>
        </c:forEach>
        <template:module path="*"/>
    </ul>
</div>
 

The <jahia-web-app>/modules/assets/javascript/jquery.easySlider1.7.load.js defines the options for the slider in such case:

        $(document).ready(function(){    
            $("#slider2").easySlider({
                numeric: true,
                auto: true,
                continuous: true,
                speed: 200,
                pause: 4000
            });
        });
 

If your would like to customize the "pause" and "speed" settings you can create your own view for the jmix:list type, say "easySlider-content-10s" (list.easySlider-content-10s.jsp) and have t as follows:

 

<%@ taglib prefix="jcr" uri="http://www.jahia.org/tags/jcr" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="utility" uri="http://www.jahia.org/tags/utilityLib" %>
<%@ taglib prefix="template" uri="http://www.jahia.org/tags/templateLib" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<template:include view="hidden.load"/>

<template:addResources type="javascript" resources="jquery.min.js,jquery.easySlider1.7.js,jquery.easySlider1.7.load.js"/>
<template:addResources type="css" resources="jquery.easySlider1.7.css"/>

<c:if test="${empty editable}">
    <c:set var="editable" value="false"/>
</c:if>

<template:addResources>

<script type="text/javascript">

        $(document).ready(function(){    
            $("#slider-10s").easySlider({
                numeric: true,
                auto: true,
                continuous: true,
                speed: 200,
                pause: 10000
            });
        });
</script>

</template:addResources>


<div id="slider-10s">
    <ul>
        <c:forEach items="${moduleMap.currentList}" var="child" varStatus="status">
            <li>
                <template:module node="${child}"/>
            </li>
        </c:forEach>
        <template:module path="*"/>
    </ul>
</div>
 

It will create a slider with 10 seconds pause between content changes.

We can also imagine making those options "parameterizable" via edit engine, but had no requirements so far :-)

 

Kind regard

Sergiy

  • Re: Change the banner rotation time
    2012/11/26 17:26

    shyrkov <p> Hello Andreas,</p> <p> the banner is implemented as a content list with a special view. You can see in the Studio that the illustration area has a &quot;easySlider-content&quot; view:</p> <p> <a href="http://img11.imageshack.us/img11/3539/illustrationareastudio.png" target="_blank"><img alt="screenshot" src="http://imageshack.us/scaled/thumb/11/illustrationareastudio.png" style="width: 125px; height: 90px;" /></a></p> <p> The following JSP corresponds to the veiew: &lt;jahia-web-app&gt;/modules/default/jmix_list/html/list.easySlider-content.jsp</p> <p> This one is in turn uses the jQuery&#39;s easySlider plugin (with default settings) to display a slider on the div with the ID &quot;slider2&quot;:</p> <blockquote> <p> &lt;div id=&quot;slider2&quot;&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;ul&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;c:forEach items=&quot;${moduleMap.currentList}&quot; var=&quot;child&quot; varStatus=&quot;status&quot;&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;template:module node=&quot;${child}&quot;/&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/c:forEach&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;template:module path=&quot;*&quot;/&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br /> &lt;/div&gt;<br /> &nbsp;</p> </blockquote> <p> The &lt;jahia-web-app&gt;/modules/assets/javascript/jquery.easySlider1.7.load.js defines the options for the slider in such case:</p> <blockquote> <p> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; $(document).ready(function(){&nbsp;&nbsp; &nbsp;<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; $(&quot;#slider2&quot;).easySlider({<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;numeric: true,<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;auto: true,<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;continuous: true,<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;speed: 200,<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;pause: 4000<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<br /> &nbsp;</p> </blockquote> <p> If your would like to customize the &quot;pause&quot; and &quot;speed&quot; settings you can create your own view for the jmix:list type, say &quot;easySlider-content-10s&quot; (list.easySlider-content-10s.jsp) and have t as follows:</p> <blockquote> <p> &nbsp;</p> <p> &lt;%@ taglib prefix=&quot;jcr&quot; uri=&quot;http://www.jahia.org/tags/jcr&quot; %&gt;<br /> &lt;%@ taglib prefix=&quot;fmt&quot; uri=&quot;http://java.sun.com/jsp/jstl/fmt&quot; %&gt;<br /> &lt;%@ taglib prefix=&quot;c&quot; uri=&quot;http://java.sun.com/jsp/jstl/core&quot; %&gt;<br /> &lt;%@ taglib prefix=&quot;utility&quot; uri=&quot;http://www.jahia.org/tags/utilityLib&quot; %&gt;<br /> &lt;%@ taglib prefix=&quot;template&quot; uri=&quot;http://www.jahia.org/tags/templateLib&quot; %&gt;<br /> &lt;%@ taglib prefix=&quot;fn&quot; uri=&quot;http://java.sun.com/jsp/jstl/functions&quot; %&gt;<br /> <br /> &lt;template:include view=&quot;hidden.load&quot;/&gt;<br /> <br /> &lt;template:addResources type=&quot;javascript&quot; resources=&quot;jquery.min.js,jquery.easySlider1.7.js,jquery.easySlider1.7.load.js&quot;/&gt;<br /> &lt;template:addResources type=&quot;css&quot; resources=&quot;jquery.easySlider1.7.css&quot;/&gt;<br /> <br /> &lt;c:if test=&quot;${empty editable}&quot;&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;c:set var=&quot;editable&quot; value=&quot;false&quot;/&gt;<br /> &lt;/c:if&gt;</p> <p> &lt;template:addResources&gt;</p> <p> &lt;script type=&quot;text/javascript&quot;&gt;</p> <p> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; $(document).ready(function(){&nbsp;&nbsp; &nbsp;<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; $(&quot;#slider-10s&quot;).easySlider({<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;numeric: true,<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;auto: true,<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;continuous: true,<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;speed: 200,<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;pause: 10000<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<br /> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<br /> &lt;/script&gt;</p> <p> &lt;/template:addResources&gt;</p> <p> <br /> &lt;div id=&quot;slider-10s&quot;&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;ul&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;c:forEach items=&quot;${moduleMap.currentList}&quot; var=&quot;child&quot; varStatus=&quot;status&quot;&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;template:module node=&quot;${child}&quot;/&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/c:forEach&gt;<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;template:module path=&quot;*&quot;/&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br /> &lt;/div&gt;<br /> &nbsp;</p> </blockquote> <p> It will create a slider with 10 seconds pause between content changes.</p> <p> We can also imagine making those options &quot;parameterizable&quot; via edit engine, but had no requirements so far :-)</p> <p> &nbsp;</p> <p> Kind regard</p> <p> Sergiy</p>

  • Number of messages  407
    Registration date Nov 26, 2012
    Contact
    Share
    Feedback

    Get in touch

    Whether you are a current user or if you are just evaluating Jahia, we are here to help.

    Contact us

    Share this page