Implementing a sliding banner theme using jquery.

[pawan chauhan, modificado hace 11 años.]

Hi all,
I am trying to implement a theme in liferay 6.1 with a sliding banner using jquery.
i have implemented the same in my jsps but here i am not being able to do so..

I have attached the .js file below that slides the images..
now the problem is i have to pass the id of the div where the scrolling part is to be placed. for that i place this script

<script>
$(function () {
$('#announcement1"').anythingSlider({
// theme : 'metallic',
expand : false,
autoPlay : true
});
$('#announcement2').anythingSlider({
// theme : 'metallic',
expand : false,
autoPlay : true
});
$('#announcement3').anythingSlider({
// theme : 'metallic',
expand : false,
autoPlay : true,
navigationFormatter : function(index, panel){ // Format navigation labels with text
return ['text1', 'text2', 'text3', 'text4', 'text5'][index - 1];
}
});


});
</script>

how do i do this in portal_normal.vm... is it even possible??
please guide.
request you to suggest other ways if possible.

the js file goes like this.

(function($) {

	$.anythingSlider = function(el, options) {

		var base = this, o;

		// Wraps the ul in the necessary divs and then gives Access to jQuery element
		base.el = el;
		base.$el = $(el).addClass('anythingBase').wrap('<div class="anythingSlider"><div class="anythingWindow"></div></div>');

		// Add a reverse reference to the DOM object
		base.$el.data("AnythingSlider", base);

		base.init = function(){

			// Added "o" to be used in the code instead of "base.options" which doesn't get modifed by the compiler - reduces size by ~1k
			base.options = o = $.extend({}, $.anythingSlider.defaults, options);

			base.initialized = false;
			if ($.isFunction(o.onBeforeInitialize)) { base.$el.bind('before_initialize', o.onBeforeInitialize); }
			base.$el.trigger('before_initialize', base);

			// Cache existing DOM elements for later
			// base.$el = original ul
			// for wrap - get parent() then closest in case the ul has "anythingSlider" class
			base.$wrapper = base.$el.parent().closest('div.anythingSlider').addClass('anythingSlider-' + o.theme);
			base.$window = base.$el.closest('div.anythingWindow');
			base.win = window;
			base.$win = $(base.win);

			base.$controls = $('<div class="anythingControls"></div>').appendTo( (o.appendControlsTo !== null &amp;&amp; $(o.appendControlsTo).length) ? $(o.appendControlsTo) : base.$wrapper);
			base.$startStop = $('<a href="#" class="start-stop"></a>');
			if (o.buildStartStop) {
				base.$startStop.appendTo( (o.appendStartStopTo !== null &amp;&amp; $(o.appendStartStopTo).length) ? $(o.appendStartStopTo) : base.$controls );
			}
			base.$nav = $('<ul class="thumbNav"></ul>').appendTo( (o.appendNavigationTo !== null &amp;&amp; $(o.appendNavigationTo).length) ? $(o.appendNavigationTo) : base.$controls );

			// Set up a few defaults &amp; get details
			base.flag    = false; // event flag to prevent multiple calls (used in control click/focusin)
			base.playing = o.autoPlay; // slideshow state; removed "startStopped" option
			base.slideshow = false; // slideshow flag needed to correctly trigger slideshow events
			base.hovered = false; // actively hovering over the slider
			base.panelSize = [];  // will contain dimensions and left position of each panel
			base.currentPage = o.startPanel = parseInt(o.startPanel,10) || 1; // make sure this isn't a string
			o.changeBy = parseInt(o.changeBy,10) || 1;
			base.adj = (o.infiniteSlides) ? 0 : 1; // adjust page limits for infinite or limited modes
			base.width = base.$el.width();
			base.height = base.$el.height();
			base.outerPad = [ base.$wrapper.innerWidth() - base.$wrapper.width(), base.$wrapper.innerHeight() - base.$wrapper.height() ];
			if (o.playRtl) { base.$wrapper.addClass('rtl'); }

			// Expand slider to fit parent
			if (o.expand) {
				base.$outer = base.$wrapper.parent();
				base.$window.css({ width: '100%', height: '100%' }); // needed for Opera
				base.checkResize();
			}

			// Build start/stop button
			if (o.buildStartStop) { base.buildAutoPlay(); }

			// Build forwards/backwards buttons
			if (o.buildArrows) { base.buildNextBackButtons(); }

			// can't lock autoplay it if it's not enabled
			if (!o.autoPlay) { o.autoPlayLocked = false; }

			base.updateSlider();

			base.$lastPage = base.$currentPage;

			// Get index (run time) of this slider on the page
			base.runTimes = $('div.anythingSlider').index(base.$wrapper) + 1;
			base.regex = new RegExp('panel' + base.runTimes + '-(\\d+)', 'i'); // hash tag regex
			if (base.runTimes === 1) { base.makeActive(); } // make the first slider on the page active

			// Make sure easing function exists.
			if (!$.isFunction($.easing[o.easing])) { o.easing = "swing"; }

			// If pauseOnHover then add hover effects
			if (o.pauseOnHover) {
				base.$wrapper.hover(function() {
					if (base.playing) {
						base.$el.trigger('slideshow_paused', base);
						base.clearTimer(true);
					}
				}, function() {
					if (base.playing) {
						base.$el.trigger('slideshow_unpaused', base);
						base.startStop(base.playing, true);
					}
				});
			}

			// If a hash can not be used to trigger the plugin, then go to start panel
			base.setCurrentPage(base.gotoHash() || o.startPage, false);

			// Hide/Show navigation &amp; play/stop controls
			base.slideControls(false);
			base.$wrapper.bind('mouseenter mouseleave', function(e){
				base.hovered = (e.type === "mouseenter") ? true : false;
				base.slideControls( base.hovered, false );
			});

			// Add keyboard navigation
			$(document).keyup(function(e){
				// Stop arrow keys from working when focused on form items
				if (o.enableKeyboard &amp;&amp; base.$wrapper.is('.activeSlider') &amp;&amp; !e.target.tagName.match('TEXTAREA|INPUT|SELECT')) {
					if (!o.vertical &amp;&amp; (e.which === 38 || e.which === 40)) { return; }
					switch (e.which) {
						case 39: case 40: // right &amp; down arrow
							base.goForward();
							break;
						case 37: case 38: // left &amp; up arrow
							base.goBack();
							break;
					}
				}
			});

			// Fix tabbing through the page, but don't change the view if the link is in view (showMultiple = true)
			base.$items.delegate('a', 'focus.AnythingSlider', function(e){
				var panel = $(this).closest('.panel'),
				 indx = base.$items.index(panel) + base.adj;
				base.$items.find('.focusedLink').removeClass('focusedLink');
				$(this).addClass('focusedLink');
				base.$window.scrollLeft(0);
				if ( (indx &gt;= base.currentPage + o.showMultiple || indx &lt; base.currentPage)) {
					base.gotoPage(indx);
					e.preventDefault();
				}
			});

			// Binds events
			var triggers = "slideshow_paused slideshow_unpaused slide_init slide_begin slideshow_stop slideshow_start initialized swf_completed".split(" ");
			$.each("onShowPause onShowUnpause onSlideInit onSlideBegin onShowStop onShowStart onInitialized onSWFComplete".split(" "), function(i,f){
				if ($.isFunction(o[f])){
					base.$el.bind(triggers[i], o[f]);
				}
			});
			if ($.isFunction(o.onSlideComplete)){
				// Added setTimeout (zero time) to ensure animation is complete... see this bug report: http://bugs.jquery.com/ticket/7157
				base.$el.bind('slide_complete', function(){
					setTimeout(function(){ o.onSlideComplete(base); }, 0);
				});
			}
			base.initialized = true;
			base.$el.trigger('initialized', base);

			// trigger the slideshow
			base.startStop(base.playing);

		};

		// called during initialization &amp; to update the slider if a panel is added or deleted
		base.updateSlider = function(){
			// needed for updating the slider
			base.$el.children('.cloned').remove();
			base.$nav.empty();
			// set currentPage to 1 in case it was zero - occurs when adding slides after removing them all
			base.currentPage = base.currentPage || 1;

			base.$items = base.$el.children();
			base.pages = base.$items.length;
			base.dir = (o.vertical) ? 'top' : 'left';
			o.showMultiple = (o.vertical) ? 1 : parseInt(o.showMultiple,10) || 1; // only integers allowed

			if (o.showMultiple &gt; 1) {
				if (o.showMultiple &gt; base.pages) { o.showMultiple = base.pages; }
				base.adjustMultiple = (o.infiniteSlides &amp;&amp; base.pages &gt; 1) ? 0 : o.showMultiple - 1;
				base.pages = base.$items.length - base.adjustMultiple;
			}

			// Hide navigation &amp; player if there is only one page
			base.$controls
				.add(base.$nav)
				.add(base.$startStop)
				.add(base.$forward)
				.add(base.$back)[(base.pages &lt;= 1) ? 'hide' : 'show']();
			if (base.pages &gt; 1) {
				// Build/update navigation tabs
				base.buildNavigation();
			}

			// Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
			// This supports the "infinite" scrolling, also ensures any cloned elements don't duplicate an ID
			// Moved removeAttr before addClass otherwise IE7 ignores the addClass: http://bugs.jquery.com/ticket/9871
			if (o.infiniteSlides &amp;&amp; base.pages &gt; 1) {
				base.$el.prepend( base.$items.filter(':last').clone().removeAttr('id').addClass('cloned') );
				// Add support for multiple sliders shown at the same time
				if (o.showMultiple &gt; 1) {
					base.$el.append( base.$items.filter(':lt(' + o.showMultiple + ')').clone().removeAttr('id').addClass('cloned').addClass('multiple') );
				} else {
					base.$el.append( base.$items.filter(':first').clone().removeAttr('id').addClass('cloned') );
				}
				base.$el.find('.cloned').each(function(){
					// disable all focusable elements in cloned panels to prevent shifting the panels by tabbing
					$(this).find('a,input,textarea,select,button,area').attr('disabled', 'disabled');
					$(this).find('[id]').removeAttr('id');
				});
			}

			// We just added two items, time to re-cache the list, then get the dimensions of each panel
			base.$items = base.$el.children().addClass('panel' + (o.vertical ? ' vertical' : ''));
			base.setDimensions();

			// Set the dimensions of each panel
			if (o.resizeContents) {
				base.$items.css('width', base.width);
				base.$wrapper.css('width', base.getDim(base.currentPage)[0]);
				base.$wrapper.add(base.$items).css('height', base.height);
			} else {
				base.$win.load(function(){ base.setDimensions(); }); // set dimensions after all images load
			}

			if (base.currentPage &gt; base.pages) {
				base.currentPage = base.pages;
			}
			base.setCurrentPage(base.currentPage, false);
			base.$nav.find('a').eq(base.currentPage - 1).addClass('cur'); // update current selection

		};

		// Creates the numbered navigation links
		base.buildNavigation = function() {
			if (o.buildNavigation &amp;&amp; (base.pages &gt; 1)) {
				var t, $a;
				base.$items.filter(':not(.cloned)').each(function(i) {
					var index = i + 1;
					t = ((index === 1) ? 'first' : '') + ((index === base.pages) ? 'last' : '');
					$a = $('<a href="#"></a>').addClass('panel' + index).wrap('<li class="' + t + '"></li>');
					base.$nav.append($a.parent()); // use $a.parent() so it will add 
 instead of only the <a> to the </a><ul><a>

					// If a formatter function is present, use it
					if ($.isFunction(o.navigationFormatter)) {
						t = o.navigationFormatter(index, $(this));
						$a.html('<span title="'+ t + '" class="tooltipSpan"></span>');
						// Add formatting to title attribute if text is hidden
						if (parseInt($a.find('span').css('text-indent'),10) &lt; 0) { $a.addClass(o.tooltipClass).attr('title', t); }
					} else {
						//$a.html('<span>' + index + '</span>');
					}

					$a.bind(o.clickControls, function(e) {
						if (!base.flag &amp;&amp; o.enableNavigation) {
							// prevent running functions twice (once for click, second time for focusin)
							base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
							base.gotoPage(index);
							if (o.hashTags) { base.setHash(index); }
						}
						e.preventDefault();
					});
				});

				// Add navigation tab scrolling
				if (o.navigationSize !== false &amp;&amp; parseInt(o.navigationSize,10) &lt; base.pages) {
					if (!base.$controls.find('.anythingNavWindow').length){
						base.$nav
							.before('<ul><li class="prev"><a href="#"><span>' + o.backText + '</span></a></li></ul></a>')
							.after('<ul><li class="next"><a href="#"><span>' + o.forwardText + '</span></a></li></ul>')
							.wrap('<div class="anythingNavWindow"></div>');
					}
					// include half of the left position to include extra width from themes like tabs-light and tabs-dark (still not perfect)
					base.navWidths = base.$nav.find('li').map(function(){
						return $(this).innerWidth() + Math.ceil(parseInt($(this).find('span').css('left'),10)/2 || 0);
					}).get();
					base.navLeft = 1;
					// add 5 pixels to make sure the tabs don't wrap to the next line
					base.$nav.width( base.navWidth( 1, base.pages + 1 ) + 5 );
					base.$controls.find('.anythingNavWindow')
						.width( base.navWidth( 1, o.navigationSize + 1 ) ).end()
						.find('.prev,.next').bind(o.clickControls, function(e) {
							if (!base.flag) {
								base.flag = true; setTimeout(function(){ base.flag = false; }, 200);
								base.navWindow( base.navLeft + o.navigationSize * ( $(this).is('.prev') ? -1 : 1 ) );
							}
							e.preventDefault();
						});
				}

			}
		};

		base.navWidth = function(x,y){
			var s = Math.min(x,y),
				e = Math.max(x,y),
				w = 0;
			for (; s &lt; e; s++) {
				w += base.navWidths[s-1] || 0;
			}
			return w;
		};

		base.navWindow = function(n){
			var p = base.pages - o.navigationSize + 1;
			n = (n &lt;= 1) ? 1 : (n &gt; 1 &amp;&amp; n &lt; p) ? n : p;
			if (n !== base.navLeft) {
				base.$controls.find('.anythingNavWindow').animate(
					{ scrollLeft: base.navWidth(1, n), width: base.navWidth(n, n + o.navigationSize) },
					{ queue: false, duration: o.animationTime });
				base.navLeft = n;
			}
		};

		// Creates the Forward/Backward buttons
		base.buildNextBackButtons = function() {
			base.$forward = $('<span class="arrow forward"><a href="#"><span>' + o.forwardText + '</span></a></span>');
			base.$back = $('<span class="arrow back"><a href="#"><span>' + o.backText + '</span></a></span>');

			// Bind to the forward and back buttons
			base.$back.bind(o.clickBackArrow, function(e) {
				// prevent running functions twice (once for click, second time for swipe)
				if (o.enableArrows &amp;&amp; !base.flag) {
					base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
					base.goBack();
				}
				e.preventDefault();
			});
			base.$forward.bind(o.clickForwardArrow, function(e) {
				// prevent running functions twice (once for click, second time for swipe)
				if (o.enableArrows &amp;&amp; !base.flag) {
					base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
					base.goForward();
				}
				e.preventDefault();
			});
			// using tab to get to arrow links will show they have focus (outline is disabled in css)
			base.$back.add(base.$forward).find('a').bind('focusin focusout',function(){
			 $(this).toggleClass('hover');
			});

			// Append elements to page
			base.$back.appendTo( (o.appendBackTo !== null &amp;&amp; $(o.appendBackTo).length) ? $(o.appendBackTo) : base.$wrapper );
			base.$forward.appendTo( (o.appendForwardTo !== null &amp;&amp; $(o.appendForwardTo).length) ? $(o.appendForwardTo) : base.$wrapper );

			base.$arrowWidth = base.$forward.width(); // assuming the left &amp; right arrows are the same width - used for toggle
		};

		// Creates the Start/Stop button
		base.buildAutoPlay = function(){
			base.$startStop
				.html('<span>' + (base.playing ? o.stopText : o.startText) + '</span>')
				.bind(o.clickSlideshow, function(e) {
					if (o.enableStartStop) {
						base.startStop(!base.playing);
						base.makeActive();
						if (base.playing &amp;&amp; !o.autoPlayDelayed) {
							base.goForward(true);
						}
					}
					e.preventDefault();
				})
				// show button has focus while tabbing
				.bind('focusin focusout',function(){
					$(this).toggleClass('hover');
				});
		};

		// Adjust slider dimensions on parent element resize
		base.checkResize = function(stopTimer){
			clearTimeout(base.resizeTimer);
			base.resizeTimer = setTimeout(function(){
				var w = base.$outer.width() - base.outerPad[0],
					h = (base.$outer[0].tagName === "BODY" ? base.$win.height() : base.$outer.height()) - base.outerPad[1];
				// base.width = width of one panel, so multiply by # of panels; outerPad is padding added for arrows.
				if (base.width * o.showMultiple !== w || base.height !== h) {
					base.setDimensions(); // adjust panel sizes
					// make sure page is lined up (use -1 animation time, so we can differeniate it from when animationTime = 0)
					base.gotoPage(base.currentPage, base.playing, null, -1);
				}
				if (typeof(stopTimer) === 'undefined'){ base.checkResize(); }
			}, 500);
		};

		// Set panel dimensions to either resize content or adjust panel to content
		base.setDimensions = function(){
			var w, h, c, edge = 0,
				// determine panel width
				pw = (o.showMultiple &gt; 1) ? base.width || base.$window.width()/o.showMultiple : base.$window.width(),
				winw = base.$win.width();
			if (o.expand){
				w = base.$outer.width() - base.outerPad[0];
				base.height = h = base.$outer.height() - base.outerPad[1];
				base.$wrapper.add(base.$window).add(base.$items).css({ width: w, height: h });
				base.width = pw = (o.showMultiple &gt; 1) ? w/o.showMultiple : w;
			}
			base.$items.each(function(i){
				c = $(this).children();
				if (o.resizeContents){
					// resize panel
					w = base.width;
					h = base.height;
					$(this).css({ width: w, height: h });
					if (c.length &amp;&amp; c[0].tagName === "EMBED") { c.attr({ width: '100%', height: '100%' }); } // needed for IE7; also c.length &gt; 1 in IE7
					// resize panel contents, if solitary (wrapped content or solitary image)
					if (c.length === 1){
						c.css({ width: '100%', height: '100%' });
					}
				} else {
					// get panel width &amp; height and save it
					w = $(this).width(); // if not defined, it will return the width of the ul parent
					if (c.length === 1 &amp;&amp; w &gt;= winw){
						w = (c.width() &gt;= winw) ? pw : c.width(); // get width of solitary child
						c.css('max-width', w);   // set max width for all children
					}
					$(this).css('width', w); // set width of panel
					h = (c.length === 1) ? c.outerHeight(true) : $(this).height(); // get height after setting width
					$(this).css('height', h);
				}
				base.panelSize[i] = [w,h,edge];
				edge += (o.vertical) ? h : w;
			});
			// Set total width of slider, Note that this is limited to 32766 by Opera - option removed
			base.$el.css((o.vertical ? 'height' : 'width'), edge);
		};

		// get dimension of multiple panels, as needed
		base.getDim = function(page){
			if (base.pages &lt; 1 || isNaN(page)) { return [ base.width, base.height ]; } // prevent errors when base.panelSize is empty
			page = (o.infiniteSlides &amp;&amp; base.pages &gt; 1) ? page : page - 1;
			var i,
				w = base.panelSize[page][0],
				h = base.panelSize[page][1];
			if (o.showMultiple &gt; 1) {
				for (i=1; i &lt; o.showMultiple; i++) {
					w += base.panelSize[(page + i)%o.showMultiple][0];
					h = Math.max(h, base.panelSize[page + i][1]);
				}
			}
			return [w,h];
		};

		base.goForward = function(autoplay) {
			base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? -1 : 1), autoplay);
		};

		base.goBack = function(autoplay) {
			base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? 1 : -1), autoplay);
		};

		base.gotoPage = function(page, autoplay, callback, time) {
			if (autoplay !== true) {
				autoplay = false;
				base.startStop(false);
				base.makeActive();
			}
			// check if page is an id or class name
			if (/^[#|.]/.test(page) &amp;&amp; $(page).length) {
				page = $(page).closest('.panel').index() + base.adj;
			}
			// rewind effect occurs here when changeBy &gt; 1 
			if (o.changeBy !== 1){
				if (page &lt; 0) { page += base.pages; }
				if (page &gt; base.pages) { page -= base.pages; }
			}
			if (base.pages &lt;= 1) { return; } // prevents animation
			base.$lastPage = base.$currentPage;
			if (typeof(page) !== "number") {
				page = o.startPanel;
				base.setCurrentPage(page);
			}

			// pause YouTube videos before scrolling or prevent change if playing
			if (autoplay &amp;&amp; o.isVideoPlaying(base)) { return; }

			if (page &gt; base.pages + 1 - base.adj) { page = (!o.infiniteSlides &amp;&amp; !o.stopAtEnd) ? 1 : base.pages; }
			if (page &lt; base.adj ) { page = (!o.infiniteSlides &amp;&amp; !o.stopAtEnd) ? base.pages : 1; }
			base.currentPage = ( page &gt; base.pages ) ? base.pages : ( page &lt; 1 ) ? 1 : base.currentPage;
			base.$currentPage = base.$items.eq(base.currentPage - base.adj);
			base.exactPage = page;
			base.$targetPage = base.$items.eq( (page === 0) ? base.pages - base.adj : (page &gt; base.pages) ? 1 - base.adj : page - base.adj );
			time = time || o.animationTime;
			// don't trigger events when time = 1 - to prevent FX from firing multiple times on page resize
			if (time &gt;= 0) { base.$el.trigger('slide_init', base); }

			base.slideControls(true, false);

			// When autoplay isn't passed, we stop the timer
			if (autoplay !== true) { autoplay = false; }
			// Stop the slider when we reach the last page, if the option stopAtEnd is set to true
			if (!autoplay || (o.stopAtEnd &amp;&amp; page === base.pages)) { base.startStop(false); }

			if (time &gt;= 0) { base.$el.trigger('slide_begin', base); }

			// delay starting slide animation
			setTimeout(function(d){
				// resize slider if content size varies
				if (!o.resizeContents) {
					// animating the wrapper resize before the window prevents flickering in Firefox
					d = base.getDim(page);
					base.$wrapper.filter(':not(:animated)').animate(
						// prevent animating a dimension to zero
						{ width: d[0] || base.width, height: d[1] || base.height },
						{ queue: false, duration: (time &lt; 0 ? 0 : time), easing: o.easing }
					);
				}
				d = {};
				d[base.dir] = -base.panelSize[(o.infiniteSlides &amp;&amp; base.pages &gt; 1) ? page : page - 1][2];
				// Animate Slider
				base.$el.filter(':not(:animated)').animate(
					d, { queue: false, duration: time, easing: o.easing, complete: function(){ base.endAnimation(page, callback, time); } }
				);
			}, parseInt(o.delayBeforeAnimate, 10) || 0);
		};

		base.endAnimation = function(page, callback, time){
			if (page === 0) {
				base.$el.css( base.dir, -base.panelSize[base.pages][2]);
				page = base.pages;
			} else if (page &gt; base.pages) {
				// reset back to start position
				base.$el.css( base.dir, -base.panelSize[1][2]);
				page = 1;
			}
			base.exactPage = page;
			base.setCurrentPage(page, false);
			// Add active panel class
			base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');

			if (!base.hovered) { base.slideControls(false); }

			if (time &gt;= 0) { base.$el.trigger('slide_complete', base); }
			// callback from external slide control: $('#slider').anythingSlider(4, function(slider){ })
			if (typeof callback === 'function') { callback(base); }

			// Continue slideshow after a delay
			if (o.autoPlayLocked &amp;&amp; !base.playing) {
				setTimeout(function(){
					base.startStop(true);
				// subtract out slide delay as the slideshow waits that additional time.
				}, o.resumeDelay - (o.autoPlayDelayed ? o.delay : 0));
			}
		};

		base.setCurrentPage = function(page, move) {
			page = parseInt(page, 10);
			if (base.pages &lt; 1 || page === 0 || isNaN(page)) { return; }
			if (page &gt; base.pages + 1 - base.adj) { page = base.pages - base.adj; }
			if (page &lt; base.adj ) { page = 1; }

			// Set visual
			if (o.buildNavigation){
				base.$nav
					.find('.cur').removeClass('cur').end()
					.find('a').eq(page - 1).addClass('cur');
			}

			// hide/show arrows based on infinite scroll mode
			if (!o.infiniteSlides &amp;&amp; o.stopAtEnd){
				base.$wrapper
					.find('span.forward')[ page === base.pages ? 'addClass' : 'removeClass']('disabled').end()
					.find('span.back')[ page === 1 ? 'addClass' : 'removeClass']('disabled');
				if (page === base.pages &amp;&amp; base.playing) { base.startStop(); }
			}

			// Only change left if move does not equal false
			if (!move) {
				var d = base.getDim(page);
				base.$wrapper
					.css({ width: d[0], height: d[1] })
					.add(base.$window).scrollLeft(0); // reset in case tabbing changed this scrollLeft - probably overly redundant
				base.$el.css( base.dir, -base.panelSize[(o.infiniteSlides &amp;&amp; base.pages &gt; 1) ? page : page - 1][2] );
			}
			// Update local variable
			base.currentPage = page;
			base.$currentPage = base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');

		};

		base.makeActive = function(){
			// Set current slider as active so keyboard navigation works properly
			if (!base.$wrapper.is('.activeSlider')){
				$('.activeSlider').removeClass('activeSlider');
				base.$wrapper.addClass('activeSlider');
			}
		};

		// This method tries to find a hash that matches an ID and panel-X
		// If either found, it tries to find a matching item
		// If that is found as well, then it returns the page number
		base.gotoHash = function(){
			var h = base.win.location.hash,
				i = h.indexOf('&amp;'),
				n = h.match(base.regex);
			if (n === null &amp;&amp; !/^#&amp;/.test(h)) {
				// #quote2&amp;panel1-3&amp;panel3-3
				h = h.substring(0, (i &gt;= 0 ? i : h.length));
				// ensure the element is in the same slider
				n = ($(h).closest('.anythingBase')[0] === base.el) ? $(h).closest('.panel').index() : null;
			} else if (n !== null) {
				// #&amp;panel1-3&amp;panel3-3
				n = (o.hashTags) ? parseInt(n[1],10) : null;
			}
			return n;
		};

		base.setHash = function(n){
			var s = 'panel' + base.runTimes + '-',
				h = base.win.location.hash;
			if ( typeof h !== 'undefined' ) {
				base.win.location.hash = (h.indexOf(s) &gt; 0) ? h.replace(base.regex, s + n) : h + "&amp;" + s + n;
			}
		};

		// Slide controls (nav and play/stop button up or down)
		base.slideControls = function(toggle){
			var dir = (toggle) ? 'slideDown' : 'slideUp',
				t1 = (toggle) ? 0 : o.animationTime,
				t2 = (toggle) ? o.animationTime: 0,
				op = (toggle) ? 1 : 0,
				sign = (toggle) ? 0 : 1; // 0 = visible, 1 = hidden
			if (o.toggleControls) {
				base.$controls.stop(true,true).delay(t1)[dir](o.animationTime/2).delay(t2);
			}
			if (o.buildArrows &amp;&amp; o.toggleArrows) {
				if (!base.hovered &amp;&amp; base.playing) { sign = 1; op = 0; } // don't animate arrows during slideshow
				base.$forward.stop(true,true).delay(t1).animate({ right: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
				base.$back.stop(true,true).delay(t1).animate({ left: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
			}
		};

		base.clearTimer = function(paused){
			// Clear the timer only if it is set
			if (base.timer) {
				base.win.clearInterval(base.timer);
				if (!paused &amp;&amp; base.slideshow) {
					base.$el.trigger('slideshow_stop', base);
					base.slideshow = false;
				}
			}
		};

		// Pass startStop(false) to stop and startStop(true) to play
		base.startStop = function(playing, paused) {
			if (playing !== true) { playing = false; }  // Default if not supplied is false
			base.playing = playing;

			if (playing &amp;&amp; !paused) {
				base.$el.trigger('slideshow_start', base);
				base.slideshow = true;
			}

			// Toggle playing and text
			if (o.buildStartStop) {
				base.$startStop.toggleClass('playing', playing).find('span').html( playing ? o.stopText : o.startText );
				// add button text to title attribute if it is hidden by text-indent
				if (parseInt(base.$startStop.find('span').css('text-indent'),10) &lt; 0) {
					base.$startStop.addClass(o.tooltipClass).attr( 'title', playing ? o.stopText : o.startText );
				}
			}

			// Pause slideshow while video is playing
			if (playing){
				base.clearTimer(true); // Just in case this was triggered twice in a row
				base.timer = base.win.setInterval(function() {
					// prevent autoplay if video is playing
					if ( !o.isVideoPlaying(base) ) {
						base.goForward(true);
					// stop slideshow if resume if false
					} else if (!o.resumeOnVideoEnd) {
						base.startStop();
					}
				}, o.delay);
			} else {
				base.clearTimer();
			}
		};

		// Trigger the initialization
		base.init();
	};

	$.anythingSlider.defaults = {
		// Appearance
		theme               : "default", // Theme name, add the css stylesheet manually
		expand              : false,     // If true, the entire slider will expand to fit the parent element
		resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
		vertical            : false,     // If true, all panels will slide vertically; they slide horizontally otherwise
		showMultiple        : false,     // Set this value to a number and it will show that many slides at once
		easing              : "swing",   // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI

		buildArrows         : true,      // If true, builds the forwards and backwards buttons
		buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
		buildStartStop      : true,      // ** If true, builds the start/stop button

		appendForwardTo     : null,      // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
		appendBackTo        : null,      // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
		appendControlsTo    : null,      // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
		appendNavigationTo  : null,      // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
		appendStartStopTo   : null,      // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null

		toggleArrows        : false,     // If true, side navigation arrows will slide out on hovering &amp; hide @ other times
		toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times

		startText           : "Start",   // Start button text
		stopText            : "Stop",    // Stop button text
		forwardText         : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
		backText            : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
		tooltipClass        : "tooltip", // Class added to navigation &amp; start/stop button (text copied to title if it is hidden by a negative text indent)

		// Function
		enableArrows        : true,      // if false, arrows will be visible, but not clickable.
		enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
		enableStartStop     : true,      // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
		enableKeyboard      : true,      // if false, keyboard arrow keys will not work for this slider.

		// Navigation
		startPanel          : 1,         // This sets the initial panel
		changeBy            : 1,         // Amount to go forward or back when changing panels.
		hashTags            : true,      // Should links change the hashtag in the URL?
		infiniteSlides      : true,      // if false, the slider will not wrap &amp; not clone any panels
		navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
		navigationSize      : false,     // Set this to the maximum number of visible navigation tabs; false to disable

		// Slideshow options
		autoPlay            : true,     // If true, the slideshow will start running; replaces "startStopped" option
		autoPlayLocked      : true,     // If true, user changing slides will not stop the slideshow
		autoPlayDelayed     : false,     // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
		pauseOnHover        : true,      // If true &amp; the slideshow is active, the slideshow will pause on hover
		stopAtEnd           : false,     // If true &amp; the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
		playRtl             : false,     // If true, the slideshow will move right-to-left

		// Times
		delay               : 3000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
		resumeDelay         : 15000,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
		animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
		delayBeforeAnimate  : 0,         // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).

		// Callbacks - removed from options to reduce size - they still work

		// Interactivity
		clickForwardArrow   : "click",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
		clickBackArrow      : "click",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
		clickControls       : "click focusin", // Events used to activate navigation control functionality
		clickSlideshow      : "click",         // Event used to activate slideshow play/stop button

		// Video
		resumeOnVideoEnd    : true,      // If true &amp; the slideshow is active &amp; a supported video is playing, it will pause the autoplay until the video is complete
		addWmodeToObject    : "opaque",  // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
		isVideoPlaying      : function(base){ return false; } // return true if video is playing or false if not - used by video extension

	};

	$.fn.anythingSlider = function(options, callback) {

		return this.each(function(){
			var page, anySlide = $(this).data('AnythingSlider');

			// initialize the slider but prevent multiple initializations
			if ((typeof(options)).match('object|undefined')){
				if (!anySlide) {
					(new $.anythingSlider(this, options));
				} else {
					anySlide.updateSlider();
				}
			// If options is a number, process as an external link to page #: $(element).anythingSlider(#)
			} else if (/\d/.test(options) &amp;&amp; !isNaN(options) &amp;&amp; anySlide) {
				page = (typeof(options) === "number") ? options : parseInt($.trim(options),10); // accepts "  2  "
				// ignore out of bound pages
				if ( page &gt;= 1 &amp;&amp; page &lt;= anySlide.pages ) {
					anySlide.gotoPage(page, false, callback); // page #, autoplay, one time callback
				}
			// Accept id or class name
			} else if (/^[#|.]/.test(options) &amp;&amp; $(options).length) {
				anySlide.gotoPage(options, false, callback);
			}
		});
	};

})(jQuery);


</ul>

[Jose Jiménez, modificado hace 11 años.]

Hello,

If you want use JQuery, you must provided it. For example, via an include in the theme or providing it to all the pages overwritten in your portal-ext.properties the next property

   javascript.barebone.files=\
        \
        #
        # YUI core
        #
        \
        aui/yui/yui.js,\
        \

[...] ..... keep all the js dependencies of Liferay Portal  ....... [...]

        \
        #
        # Add your dependencies
        #
        \
        custom/jquery-X.X.X.min.js

And then add JQuery library with a hook in the specified path.

Only you must keep in mind how to use it, normally via jQuery() and not with the $() identifier.

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

So, you must to rewrite your js code using jQuery instead of $.

I hope this helps you.

[pawan chauhan, modificado hace 11 años.]

hey jose,
thanks for the reply. I am new to liferay and i can't follow you completely.
can you plz explain it in detail.
thanks in advance.

so far i have created a theme and i have put a static banner image by modifying the normal_portal.vm.

i have put the same .js file inside js folder and have called it in .vm file using

#js ("$javascript_folder/jquery.anythingslider.js")

after this i am clueless.

[Jose Jiménez, modificado hace 11 años.]

Hi again

at first glance, I didn't understand your problem and I thought that in general JQuery didn't work because it wasn't loaded. I am not sure which is your problem yet, but if your js-code is correct, you only must to ensure that the dom was loaded when js is executed. You can do this with:

<script type="text/javascript">
$(document).ready(
function() {

/** your code **/

 });
</script>

Can it be your problem?

[pawan chauhan, modificado hace 11 años.]

hey I am sorry for posting it in such a vague manner.
let me try again.

Below is the code of portal_normal.vm
as you can see, there is a div with id "header". this is where i have a static image.

now for jquery to work, i need to pass this id as a parameter and that's exactly where the catch is..
normally i do it as :

<script>
            $(function () {
                $('#announcemenCarousel').anythingSlider({
                    //			theme : 'metallic',
                    expand       : false,
                    autoPlay     : true
                });
                $('#homeRightNews').anythingSlider({
                    //			theme : 'metallic',
                    expand       : false,
                    autoPlay     : true
                });
                $('#headerCarousel').anythingSlider({
                    //			theme : 'metallic',
                    expand       : false,
                    autoPlay     : true,
                    navigationFormatter : function(index, panel){ // Format navigation labels with text
                        return ['text1', 'text2', 'text3', 'text4', 'text5'][index - 1];
                    }
                });


            });
        </script>

and the question is how do i use this tag to pass the header id in portal_normal.vm

is my problem clear now?? please help

#parse ($init)




	<title>$the_title - $company_name</title>

	$theme.include($top_head_include)




$theme.include($body_top_include)

#if ($is_signed_in)
	#dockbar()
#end

<div id="wrapper">
	<a href="#main-content" id="skip-to-content">#language("skip-to-content")</a>

	<header id="banner" role="banner">
		<div id="heading">
			<h1 class="site-title">
				<a class="$logo_css_class" href="$site_default_url" title="#language(" go-to") $site_name">
					<img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width">
				</a>

				#if ($show_site_name)
					<span class="site-name" title="#language(" go-to") $site_name">
						$site_name
					</span>
				#end
			</h1>

			<h2 class="page-title">
				<span>$the_title</span>
			</h2>
		</div>

		#if (!$is_signed_in)
			<a href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>
		#end

		#if ($has_navigation || $is_signed_in)
			#parse ("$full_templates_path/navigation.vm")
		#end
	</header>

	<div id="content">
		<nav class="site-breadcrumbs" id="breadcrumbs">
			<h1>
				<span>#language("breadcrumbs")</span>
			</h1>

			#breadcrumbs()
		</nav>

		#if ($selectable)
			$theme.include($content_include)
		#else
			$portletDisplay.recycle()

			$portletDisplay.setTitle($the_title)

			$theme.wrapPortlet("portlet.vm", $content_include)
		#end
	</div>

	<footer id="footer" role="contentinfo">
		<p class="powered-by">
			#language("powered-by") <a href="http://www.liferay.com" rel="external">Liferay</a>
		</p>
	</footer>
</div>

$theme.include($body_bottom_include)



$theme.include($bottom_include)

[pawan chauhan, modificado hace 11 años.]

In a nutshell all that i am trying to say is i want a code for portal_normal.vm that does the same as this code does for jsps.

<script>
            $(function () {
                
                $('#headerCarousel').anythingSlider({
                    //            theme : 'metallic',
                    expand       : false,
                    autoPlay     : true,
                    navigationFormatter : function(index, panel){ // Format navigation labels with text
                        return ['text1', 'text2', 'text3', 'text4', 'text5'][index - 1];
                    }
                });


            });
        </script>

here "headerCarousel" is the id of the div in my jsp where the images have to slide.

i really am having a tough tym explaining my problem.
please help.

[Jose Jiménez, modificado hace 11 años.]

Sorry, I don't understand very well your situation.

There aren't differences between executing jquery in a velocity theme-template that in a view.jsp of a portlet. If you know the headerid and invoque your plugin in the same way that in your jsp, the pluging must work. If doesn't, the problem may be other as JQuery is not being loaded correctly.

Do you have any javascript error in the navigator?

[pawan chauhan, modificado hace 11 años.]

yes i am having javascript errors,

when i put the script tag in normal_portal.vm as :

<script>
            $(function () {
                $('#banner').anythingSlider({
                    //			theme : 'metallic',
                    expand       : false,
                    autoPlay     : true,
                    navigationFormatter : function(index, panel){ // Format navigation labels with text
                        return ['text1', 'text 2', 'text 3', 'text 4', 'text 5'][index - 1];
                    }
                });


            });
 </script>

I get the folowing script errors.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Timestamp: Fri, 2 Nov 2012 10:44:35 UTC


Message: 'undefined' is null or not an object
Line: 21
Char: 2
Code: 0
URI: http://localhost:8080/SbiConnect-theme/js/jquery.anythingslider.js


Message: Object expected
Line: 1
Char: 14
Code: 0
URI: http://localhost:8080/web/pawan/hom

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729)
Timestamp: Fri, 2 Nov 2012 10:44:52 UTC


Message: 'undefined' is null or not an object
Line: 21
Char: 2
Code: 0
URI: http://localhost:8080/SbiConnect-theme/js/jquery.anythingslider.js


Message: Object expected
Line: 1
Char: 14
Code: 0
URI: http://localhost:8080/web/pawan/home

Kindly help .

and on a very different note, all that i am trying to do is

"How to slide "n" number of images as a background for the Customized theme body in liferay"..
if there is a simple way kindly suggest.

thanks in advance.

[Jose Jiménez, modificado hace 11 años.]

I think that you have a javascript error independent of Liferay Portal. Could it be a problem with the plugin?

Have you test with an id of a div element in the theme instead a header? Probably the plugin hopes a div-id.

Also it's possible that the dom isn't ready when the javascript is runned. You can try this code in order to check if the element has been found :

<script>
            $(function () {
alert( $('#banner').html());
});
</script>

If it doesn't, try to put your code ensuring that the dom is ready:

<script>
$(document).ready(
  function () {
  alert( $('#banner').html());
});
</script>

If it works, you must to wrap your code with the function $(document).ready( ), that is executed when the event onLoad is triggered.

I hope it helps you.

Cheers,

[pawan chauhan, modificado hace 11 años.]

I din get any alert in both the case.
something is really wrong with my understanding here.
how do you propose i take it further.
kindly help.

[pawan chauhan, modificado hace 11 años.]

Hi jose,

finally i got it working
just had to get few concepts of velocity right.

Thanks for all the help.

[Jose Jiménez, modificado hace 11 años.]

Perfect, I'm glad to hear this.
You are welcome.

[Jose Jiménez, modificado hace 11 años.]

if you tell us where was the problem together we create a knowledge base..

Can you tell us where was the problem?

Thanks!

[pawan chauhan, modificado hace 11 años.]

All this while i was trying to put the <style> and <script> inside the <head > tag but that wasn't being picked up by the parser for some reason.

Putting them in the <body> tag worked.

Also in order to call the images in the .vm file i had to use
<img src="$themeDisplay.getPathThemeImages()/folder/promotion1.jpg">


hope this information proves useful

Thanks.