jQuery Image Scrolling

ebaileyybs · ‎12-11-2014

Hi,

I would like to create an image scroller on one of our CMS homepages.I have found the following article which has a jQuery for a scroller;

http://cssglobe.com/jquery-plugin-easy-image-or-content-slider/

I have created a UI script for the jQuery code. I have then started to create the script with my images to try to set them to scroll.

Here is my script so far;

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:include_script src="easySlider.1.7.js"/>

<ul>

</ul>

</div>

</j:jelly>

I am struggling with the next steps after adding the <div> code. What do I need to do to get this working?

Any help with this would be greatly appreciated.

Kind regards,

Emma

Kalaiarasan Pus · ‎12-11-2014

possible to attach the xml's of both the ui script and ui page?

ebaileyybs · ‎12-11-2014

UI Script:

/*

* Easy Slider 1.7 - jQuery plugin

* written by Alen Grakalic

* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

*

* Dual licensed under the MIT (MIT-LICENSE.txt)

* and GPL (GPL-LICENSE.txt) licenses.

*

* Built for jQuery library

* http://jquery.com

*

*/

/*

* markup example for $("#slider").easySlider();

*

* <div id="slider">

* <ul>

* <li><img src="images/01.jpg" alt="" /></li>

* <li><img src="images/02.jpg" alt="" /></li>

* <li><img src="images/03.jpg" alt="" /></li>

* <li><img src="images/04.jpg" alt="" /></li>

* <li><img src="images/05.jpg" alt="" /></li>

* </ul>

* </div>

*

*/

(function($) {

$.fn.easySlider = function(options){

// default configuration properties

var defaults = {

prevId: 'prevBtn',

prevText: 'Previous',

nextId: 'nextBtn',

nextText: 'Next',

controlsShow: true,

controlsBefore: '',

controlsAfter: '',

controlsFade: true,

firstId: 'firstBtn',

firstText: 'First',

firstShow: false,

lastId: 'lastBtn',

lastText: 'Last',

lastShow: false,

vertical: false,

speed: 800,

auto: false,

pause: 2000,

continuous: false,

numeric: false,

numericId: 'controls'

};

var options = $.extend(defaults, options);

this.each(function() {

var obj = $(this);

var s = $("li", obj).length;

var w = $("li", obj).width();

var h = $("li", obj).height();

var clickable = true;

obj.width(w);

obj.height(h);

obj.css("overflow","hidden");

var ts = s-1;

var t = 0;

$("ul", obj).css('width',s*w);

if(options.continuous){

$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));

$("ul", obj).append($("ul li:nth-child(2)", obj).clone());

$("ul", obj).css('width',(s+1)*w);

};

if(!options.vertical) $("li", obj).css('float','left');

if(options.controlsShow){

var html = options.controlsBefore;

if(options.numeric){

html += '<ol id="'+ options.numericId +'"></ol>';

} else {

if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';

html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';

html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';

if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';

};

html += options.controlsAfter;

$(obj).after(html);

};

if(options.numeric){

for(var i=0;i<s;i++){

$(document.createElement("li"))

.attr('id',options.numericId + (i+1))

.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')

.appendTo($("#"+ options.numericId))

.click(function(){

animate($("a",$(this)).attr('rel'),true);

});

};

} else {

$("a","#"+options.nextId).click(function(){

animate("next",true);

});

$("a","#"+options.prevId).click(function(){

animate("prev",true);

});

$("a","#"+options.firstId).click(function(){

animate("first",true);

});

$("a","#"+options.lastId).click(function(){

animate("last",true);

});

};

function setCurrent(i){

i = parseInt(i)+1;

$("li", "#" + options.numericId).removeClass("current");

$("li#" + options.numericId + i).addClass("current");

};

function adjust(){

if(t>ts) t=0;

if(t<0) t=ts;

if(!options.vertical) {

$("ul",obj).css("margin-left",(t*w*-1));

} else {

$("ul",obj).css("margin-left",(t*h*-1));

}

clickable = true;

if(options.numeric) setCurrent(t);

};

function animate(dir,clicked){

if (clickable){

clickable = false;

var ot = t;

switch(dir){

case "next":

t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;

break;

case "prev":

t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;

break;

case "first":

t = 0;

break;

case "last":

t = ts;

break;

default:

t = dir;

break;

};

var diff = Math.abs(ot-t);

var speed = diff*options.speed;

if(!options.vertical) {

p = (t*w*-1);

$("ul",obj).animate(

{ marginLeft: p },

{ queue:false, duration:speed, complete:adjust }

);

} else {

p = (t*h*-1);

$("ul",obj).animate(

{ marginTop: p },

{ queue:false, duration:speed, complete:adjust }

);

};

if(!options.continuous && options.controlsFade){

if(t==ts){

$("a","#"+options.nextId).hide();

$("a","#"+options.lastId).hide();

} else {

$("a","#"+options.nextId).show();

$("a","#"+options.lastId).show();

};

if(t==0){

$("a","#"+options.prevId).hide();

$("a","#"+options.firstId).hide();

} else {

$("a","#"+options.prevId).show();

$("a","#"+options.firstId).show();

};

if(clicked) clearTimeout(timeout);

if(options.auto && dir=="next" && !clicked){;

timeout = setTimeout(function(){

animate("next",false);

},diff*options.speed+options.pause);

};

// init

var timeout;

if(options.auto){;

timeout = setTimeout(function(){

animate("next",false);

},options.pause);

};

if(options.numeric) setCurrent(0);

if(!options.continuous && options.controlsFade){

$("a","#"+options.prevId).hide();

$("a","#"+options.firstId).hide();

};

});

};

})(jQuery);

ebaileyybs · ‎12-11-2014

Dynamic Content Block script so far;

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:include_script src="easySlider.1.7.js"/>

<ul>

</ul>

</div>

</j:jelly>

ebaileyybs · ‎12-11-2014

Hi,

I have added the UI Script and the Dynamic Content Block script.

Any help you can offer would be greatly appreciated.

Thank you,

Emma

Artemis15 · ‎09-21-2015

Hi Emma,

This is a jquery plugin and to use this you first need to include jquery in your ui page.

Try to include this line before calling your UI Script

<g:requires name="scripts/lib/jquery_includes.js"/>

Hope this helps.

--

Cheers,

AR