Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
pawan chauhan
Implementing a sliding banner theme using jquery.
November 2, 2012 12:23 AM
Answer

pawan chauhan

Rank: Junior Member

Posts: 75

Join Date: October 8, 2012

Recent Posts

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.
  1(function($) {
  2
  3    $.anythingSlider = function(el, options) {
  4
  5        var base = this, o;
  6
  7        // Wraps the ul in the necessary divs and then gives Access to jQuery element
  8        base.el = el;
  9        base.$el = $(el).addClass('anythingBase').wrap('<div class="anythingSlider"><div class="anythingWindow" /></div>');
 10
 11        // Add a reverse reference to the DOM object
 12        base.$el.data("AnythingSlider", base);
 13
 14        base.init = function(){
 15
 16            // Added "o" to be used in the code instead of "base.options" which doesn't get modifed by the compiler - reduces size by ~1k
 17            base.options = o = $.extend({}, $.anythingSlider.defaults, options);
 18
 19            base.initialized = false;
 20            if ($.isFunction(o.onBeforeInitialize)) { base.$el.bind('before_initialize', o.onBeforeInitialize); }
 21            base.$el.trigger('before_initialize', base);
 22
 23            // Cache existing DOM elements for later
 24            // base.$el = original ul
 25            // for wrap - get parent() then closest in case the ul has "anythingSlider" class
 26            base.$wrapper = base.$el.parent().closest('div.anythingSlider').addClass('anythingSlider-' + o.theme);
 27            base.$window = base.$el.closest('div.anythingWindow');
 28            base.win = window;
 29            base.$win = $(base.win);
 30
 31            base.$controls = $('<div class="anythingControls"></div>').appendTo( (o.appendControlsTo !== null && $(o.appendControlsTo).length) ? $(o.appendControlsTo) : base.$wrapper);
 32            base.$startStop = $('<a href="#" class="start-stop"></a>');
 33            if (o.buildStartStop) {
 34                base.$startStop.appendTo( (o.appendStartStopTo !== null && $(o.appendStartStopTo).length) ? $(o.appendStartStopTo) : base.$controls );
 35            }
 36            base.$nav = $('<ul class="thumbNav" />').appendTo( (o.appendNavigationTo !== null && $(o.appendNavigationTo).length) ? $(o.appendNavigationTo) : base.$controls );
 37
 38            // Set up a few defaults & get details
 39            base.flag    = false; // event flag to prevent multiple calls (used in control click/focusin)
 40            base.playing = o.autoPlay; // slideshow state; removed "startStopped" option
 41            base.slideshow = false; // slideshow flag needed to correctly trigger slideshow events
 42            base.hovered = false; // actively hovering over the slider
 43            base.panelSize = [];  // will contain dimensions and left position of each panel
 44            base.currentPage = o.startPanel = parseInt(o.startPanel,10) || 1; // make sure this isn't a string
 45            o.changeBy = parseInt(o.changeBy,10) || 1;
 46            base.adj = (o.infiniteSlides) ? 0 : 1; // adjust page limits for infinite or limited modes
 47            base.width = base.$el.width();
 48            base.height = base.$el.height();
 49            base.outerPad = [ base.$wrapper.innerWidth() - base.$wrapper.width(), base.$wrapper.innerHeight() - base.$wrapper.height() ];
 50            if (o.playRtl) { base.$wrapper.addClass('rtl'); }
 51
 52            // Expand slider to fit parent
 53            if (o.expand) {
 54                base.$outer = base.$wrapper.parent();
 55                base.$window.css({ width: '100%', height: '100%' }); // needed for Opera
 56                base.checkResize();
 57            }
 58
 59            // Build start/stop button
 60            if (o.buildStartStop) { base.buildAutoPlay(); }
 61
 62            // Build forwards/backwards buttons
 63            if (o.buildArrows) { base.buildNextBackButtons(); }
 64
 65            // can't lock autoplay it if it's not enabled
 66            if (!o.autoPlay) { o.autoPlayLocked = false; }
 67
 68            base.updateSlider();
 69
 70            base.$lastPage = base.$currentPage;
 71
 72            // Get index (run time) of this slider on the page
 73            base.runTimes = $('div.anythingSlider').index(base.$wrapper) + 1;
 74            base.regex = new RegExp('panel' + base.runTimes + '-(\\d+)', 'i'); // hash tag regex
 75            if (base.runTimes === 1) { base.makeActive(); } // make the first slider on the page active
 76
 77            // Make sure easing function exists.
 78            if (!$.isFunction($.easing[o.easing])) { o.easing = "swing"; }
 79
 80            // If pauseOnHover then add hover effects
 81            if (o.pauseOnHover) {
 82                base.$wrapper.hover(function() {
 83                    if (base.playing) {
 84                        base.$el.trigger('slideshow_paused', base);
 85                        base.clearTimer(true);
 86                    }
 87                }, function() {
 88                    if (base.playing) {
 89                        base.$el.trigger('slideshow_unpaused', base);
 90                        base.startStop(base.playing, true);
 91                    }
 92                });
 93            }
 94
 95            // If a hash can not be used to trigger the plugin, then go to start panel
 96            base.setCurrentPage(base.gotoHash() || o.startPage, false);
 97
 98            // Hide/Show navigation & play/stop controls
 99            base.slideControls(false);
100            base.$wrapper.bind('mouseenter mouseleave', function(e){
101                base.hovered = (e.type === "mouseenter") ? true : false;
102                base.slideControls( base.hovered, false );
103            });
104
105            // Add keyboard navigation
106            $(document).keyup(function(e){
107                // Stop arrow keys from working when focused on form items
108                if (o.enableKeyboard && base.$wrapper.is('.activeSlider') && !e.target.tagName.match('TEXTAREA|INPUT|SELECT')) {
109                    if (!o.vertical && (e.which === 38 || e.which === 40)) { return; }
110                    switch (e.which) {
111                        case 39: case 40: // right & down arrow
112                            base.goForward();
113                            break;
114                        case 37: case 38: // left & up arrow
115                            base.goBack();
116                            break;
117                    }
118                }
119            });
120
121            // Fix tabbing through the page, but don't change the view if the link is in view (showMultiple = true)
122            base.$items.delegate('a', 'focus.AnythingSlider', function(e){
123                var panel = $(this).closest('.panel'),
124                 indx = base.$items.index(panel) + base.adj;
125                base.$items.find('.focusedLink').removeClass('focusedLink');
126                $(this).addClass('focusedLink');
127                base.$window.scrollLeft(0);
128                if ( (indx >= base.currentPage + o.showMultiple || indx < base.currentPage)) {
129                    base.gotoPage(indx);
130                    e.preventDefault();
131                }
132            });
133
134            // Binds events
135            var triggers = "slideshow_paused slideshow_unpaused slide_init slide_begin slideshow_stop slideshow_start initialized swf_completed".split(" ");
136            $.each("onShowPause onShowUnpause onSlideInit onSlideBegin onShowStop onShowStart onInitialized onSWFComplete".split(" "), function(i,f){
137                if ($.isFunction(o[f])){
138                    base.$el.bind(triggers[i], o[f]);
139                }
140            });
141            if ($.isFunction(o.onSlideComplete)){
142                // Added setTimeout (zero time) to ensure animation is complete... see this bug report: http://bugs.jquery.com/ticket/7157
143                base.$el.bind('slide_complete', function(){
144                    setTimeout(function(){ o.onSlideComplete(base); }, 0);
145                });
146            }
147            base.initialized = true;
148            base.$el.trigger('initialized', base);
149
150            // trigger the slideshow
151            base.startStop(base.playing);
152
153        };
154
155        // called during initialization & to update the slider if a panel is added or deleted
156        base.updateSlider = function(){
157            // needed for updating the slider
158            base.$el.children('.cloned').remove();
159            base.$nav.empty();
160            // set currentPage to 1 in case it was zero - occurs when adding slides after removing them all
161            base.currentPage = base.currentPage || 1;
162
163            base.$items = base.$el.children();
164            base.pages = base.$items.length;
165            base.dir = (o.vertical) ? 'top' : 'left';
166            o.showMultiple = (o.vertical) ? 1 : parseInt(o.showMultiple,10) || 1; // only integers allowed
167
168            if (o.showMultiple > 1) {
169                if (o.showMultiple > base.pages) { o.showMultiple = base.pages; }
170                base.adjustMultiple = (o.infiniteSlides && base.pages > 1) ? 0 : o.showMultiple - 1;
171                base.pages = base.$items.length - base.adjustMultiple;
172            }
173
174            // Hide navigation & player if there is only one page
175            base.$controls
176                .add(base.$nav)
177                .add(base.$startStop)
178                .add(base.$forward)
179                .add(base.$back)[(base.pages <= 1) ? 'hide' : 'show']();
180            if (base.pages > 1) {
181                // Build/update navigation tabs
182                base.buildNavigation();
183            }
184
185            // Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
186            // This supports the "infinite" scrolling, also ensures any cloned elements don't duplicate an ID
187            // Moved removeAttr before addClass otherwise IE7 ignores the addClass: http://bugs.jquery.com/ticket/9871
188            if (o.infiniteSlides && base.pages > 1) {
189                base.$el.prepend( base.$items.filter(':last').clone().removeAttr('id').addClass('cloned') );
190                // Add support for multiple sliders shown at the same time
191                if (o.showMultiple > 1) {
192                    base.$el.append( base.$items.filter(':lt(' + o.showMultiple + ')').clone().removeAttr('id').addClass('cloned').addClass('multiple') );
193                } else {
194                    base.$el.append( base.$items.filter(':first').clone().removeAttr('id').addClass('cloned') );
195                }
196                base.$el.find('.cloned').each(function(){
197                    // disable all focusable elements in cloned panels to prevent shifting the panels by tabbing
198                    $(this).find('a,input,textarea,select,button,area').attr('disabled', 'disabled');
199                    $(this).find('[id]').removeAttr('id');
200                });
201            }
202
203            // We just added two items, time to re-cache the list, then get the dimensions of each panel
204            base.$items = base.$el.children().addClass('panel' + (o.vertical ? ' vertical' : ''));
205            base.setDimensions();
206
207            // Set the dimensions of each panel
208            if (o.resizeContents) {
209                base.$items.css('width', base.width);
210                base.$wrapper.css('width', base.getDim(base.currentPage)[0]);
211                base.$wrapper.add(base.$items).css('height', base.height);
212            } else {
213                base.$win.load(function(){ base.setDimensions(); }); // set dimensions after all images load
214            }
215
216            if (base.currentPage > base.pages) {
217                base.currentPage = base.pages;
218            }
219            base.setCurrentPage(base.currentPage, false);
220            base.$nav.find('a').eq(base.currentPage - 1).addClass('cur'); // update current selection
221
222        };
223
224        // Creates the numbered navigation links
225        base.buildNavigation = function() {
226            if (o.buildNavigation && (base.pages > 1)) {
227                var t, $a;
228                base.$items.filter(':not(.cloned)').each(function(i) {
229                    var index = i + 1;
230                    t = ((index === 1) ? 'first' : '') + ((index === base.pages) ? 'last' : '');
231                    $a = $('<a href="#"></a>').addClass('panel' + index).wrap('<li class="' + t + '" />');
232                    base.$nav.append($a.parent()); // use $a.parent() so it will add <li> instead of only the <a> to the <ul>
233
234                    // If a formatter function is present, use it
235                    if ($.isFunction(o.navigationFormatter)) {
236                        t = o.navigationFormatter(index, $(this));
237                        $a.html('<span title="'+ t + '" class="tooltipSpan"></span>');
238                        // Add formatting to title attribute if text is hidden
239                        if (parseInt($a.find('span').css('text-indent'),10) < 0) { $a.addClass(o.tooltipClass).attr('title', t); }
240                    } else {
241                        //$a.html('<span>' + index + '</span>');
242                    }
243
244                    $a.bind(o.clickControls, function(e) {
245                        if (!base.flag && o.enableNavigation) {
246                            // prevent running functions twice (once for click, second time for focusin)
247                            base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
248                            base.gotoPage(index);
249                            if (o.hashTags) { base.setHash(index); }
250                        }
251                        e.preventDefault();
252                    });
253                });
254
255                // Add navigation tab scrolling
256                if (o.navigationSize !== false && parseInt(o.navigationSize,10) < base.pages) {
257                    if (!base.$controls.find('.anythingNavWindow').length){
258                        base.$nav
259                            .before('<ul><li class="prev"><a href="#"><span>' + o.backText + '</span></a></li></ul>')
260                            .after('<ul><li class="next"><a href="#"><span>' + o.forwardText + '</span></a></li></ul>')
261                            .wrap('<div class="anythingNavWindow"></div>');
262                    }
263                    // include half of the left position to include extra width from themes like tabs-light and tabs-dark (still not perfect)
264                    base.navWidths = base.$nav.find('li').map(function(){
265                        return $(this).innerWidth() + Math.ceil(parseInt($(this).find('span').css('left'),10)/2 || 0);
266                    }).get();
267                    base.navLeft = 1;
268                    // add 5 pixels to make sure the tabs don't wrap to the next line
269                    base.$nav.width( base.navWidth( 1, base.pages + 1 ) + 5 );
270                    base.$controls.find('.anythingNavWindow')
271                        .width( base.navWidth( 1, o.navigationSize + 1 ) ).end()
272                        .find('.prev,.next').bind(o.clickControls, function(e) {
273                            if (!base.flag) {
274                                base.flag = true; setTimeout(function(){ base.flag = false; }, 200);
275                                base.navWindow( base.navLeft + o.navigationSize * ( $(this).is('.prev') ? -1 : 1 ) );
276                            }
277                            e.preventDefault();
278                        });
279                }
280
281            }
282        };
283
284        base.navWidth = function(x,y){
285            var s = Math.min(x,y),
286                e = Math.max(x,y),
287                w = 0;
288            for (; s < e; s++) {
289                w += base.navWidths[s-1] || 0;
290            }
291            return w;
292        };
293
294        base.navWindow = function(n){
295            var p = base.pages - o.navigationSize + 1;
296            n = (n <= 1) ? 1 : (n > 1 && n < p) ? n : p;
297            if (n !== base.navLeft) {
298                base.$controls.find('.anythingNavWindow').animate(
299                    { scrollLeft: base.navWidth(1, n), width: base.navWidth(n, n + o.navigationSize) },
300                    { queue: false, duration: o.animationTime });
301                base.navLeft = n;
302            }
303        };
304
305        // Creates the Forward/Backward buttons
306        base.buildNextBackButtons = function() {
307            base.$forward = $('<span class="arrow forward"><a href="#"><span>' + o.forwardText + '</span></a></span>');
308            base.$back = $('<span class="arrow back"><a href="#"><span>' + o.backText + '</span></a></span>');
309
310            // Bind to the forward and back buttons
311            base.$back.bind(o.clickBackArrow, function(e) {
312                // prevent running functions twice (once for click, second time for swipe)
313                if (o.enableArrows && !base.flag) {
314                    base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
315                    base.goBack();
316                }
317                e.preventDefault();
318            });
319            base.$forward.bind(o.clickForwardArrow, function(e) {
320                // prevent running functions twice (once for click, second time for swipe)
321                if (o.enableArrows && !base.flag) {
322                    base.flag = true; setTimeout(function(){ base.flag = false; }, 100);
323                    base.goForward();
324                }
325                e.preventDefault();
326            });
327            // using tab to get to arrow links will show they have focus (outline is disabled in css)
328            base.$back.add(base.$forward).find('a').bind('focusin focusout',function(){
329             $(this).toggleClass('hover');
330            });
331
332            // Append elements to page
333            base.$back.appendTo( (o.appendBackTo !== null && $(o.appendBackTo).length) ? $(o.appendBackTo) : base.$wrapper );
334            base.$forward.appendTo( (o.appendForwardTo !== null && $(o.appendForwardTo).length) ? $(o.appendForwardTo) : base.$wrapper );
335
336            base.$arrowWidth = base.$forward.width(); // assuming the left & right arrows are the same width - used for toggle
337        };
338
339        // Creates the Start/Stop button
340        base.buildAutoPlay = function(){
341            base.$startStop
342                .html('<span>' + (base.playing ? o.stopText : o.startText) + '</span>')
343                .bind(o.clickSlideshow, function(e) {
344                    if (o.enableStartStop) {
345                        base.startStop(!base.playing);
346                        base.makeActive();
347                        if (base.playing && !o.autoPlayDelayed) {
348                            base.goForward(true);
349                        }
350                    }
351                    e.preventDefault();
352                })
353                // show button has focus while tabbing
354                .bind('focusin focusout',function(){
355                    $(this).toggleClass('hover');
356                });
357        };
358
359        // Adjust slider dimensions on parent element resize
360        base.checkResize = function(stopTimer){
361            clearTimeout(base.resizeTimer);
362            base.resizeTimer = setTimeout(function(){
363                var w = base.$outer.width() - base.outerPad[0],
364                    h = (base.$outer[0].tagName === "BODY" ? base.$win.height() : base.$outer.height()) - base.outerPad[1];
365                // base.width = width of one panel, so multiply by # of panels; outerPad is padding added for arrows.
366                if (base.width * o.showMultiple !== w || base.height !== h) {
367                    base.setDimensions(); // adjust panel sizes
368                    // make sure page is lined up (use -1 animation time, so we can differeniate it from when animationTime = 0)
369                    base.gotoPage(base.currentPage, base.playing, null, -1);
370                }
371                if (typeof(stopTimer) === 'undefined'){ base.checkResize(); }
372            }, 500);
373        };
374
375        // Set panel dimensions to either resize content or adjust panel to content
376        base.setDimensions = function(){
377            var w, h, c, edge = 0,
378                // determine panel width
379                pw = (o.showMultiple > 1) ? base.width || base.$window.width()/o.showMultiple : base.$window.width(),
380                winw = base.$win.width();
381            if (o.expand){
382                w = base.$outer.width() - base.outerPad[0];
383                base.height = h = base.$outer.height() - base.outerPad[1];
384                base.$wrapper.add(base.$window).add(base.$items).css({ width: w, height: h });
385                base.width = pw = (o.showMultiple > 1) ? w/o.showMultiple : w;
386            }
387            base.$items.each(function(i){
388                c = $(this).children();
389                if (o.resizeContents){
390                    // resize panel
391                    w = base.width;
392                    h = base.height;
393                    $(this).css({ width: w, height: h });
394                    if (c.length && c[0].tagName === "EMBED") { c.attr({ width: '100%', height: '100%' }); } // needed for IE7; also c.length > 1 in IE7
395                    // resize panel contents, if solitary (wrapped content or solitary image)
396                    if (c.length === 1){
397                        c.css({ width: '100%', height: '100%' });
398                    }
399                } else {
400                    // get panel width & height and save it
401                    w = $(this).width(); // if not defined, it will return the width of the ul parent
402                    if (c.length === 1 && w >= winw){
403                        w = (c.width() >= winw) ? pw : c.width(); // get width of solitary child
404                        c.css('max-width', w);   // set max width for all children
405                    }
406                    $(this).css('width', w); // set width of panel
407                    h = (c.length === 1) ? c.outerHeight(true) : $(this).height(); // get height after setting width
408                    $(this).css('height', h);
409                }
410                base.panelSize[i] = [w,h,edge];
411                edge += (o.vertical) ? h : w;
412            });
413            // Set total width of slider, Note that this is limited to 32766 by Opera - option removed
414            base.$el.css((o.vertical ? 'height' : 'width'), edge);
415        };
416
417        // get dimension of multiple panels, as needed
418        base.getDim = function(page){
419            if (base.pages < 1 || isNaN(page)) { return [ base.width, base.height ]; } // prevent errors when base.panelSize is empty
420            page = (o.infiniteSlides && base.pages > 1) ? page : page - 1;
421            var i,
422                w = base.panelSize[page][0],
423                h = base.panelSize[page][1];
424            if (o.showMultiple > 1) {
425                for (i=1; i < o.showMultiple; i++) {
426                    w += base.panelSize[(page + i)%o.showMultiple][0];
427                    h = Math.max(h, base.panelSize[page + i][1]);
428                }
429            }
430            return [w,h];
431        };
432
433        base.goForward = function(autoplay) {
434            base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? -1 : 1), autoplay);
435        };
436
437        base.goBack = function(autoplay) {
438            base.gotoPage(base.currentPage + o.changeBy * (o.playRtl ? 1 : -1), autoplay);
439        };
440
441        base.gotoPage = function(page, autoplay, callback, time) {
442            if (autoplay !== true) {
443                autoplay = false;
444                base.startStop(false);
445                base.makeActive();
446            }
447            // check if page is an id or class name
448            if (/^[#|.]/.test(page) && $(page).length) {
449                page = $(page).closest('.panel').index() + base.adj;
450            }
451            // rewind effect occurs here when changeBy > 1
452            if (o.changeBy !== 1){
453                if (page < 0) { page += base.pages; }
454                if (page > base.pages) { page -= base.pages; }
455            }
456            if (base.pages <= 1) { return; } // prevents animation
457            base.$lastPage = base.$currentPage;
458            if (typeof(page) !== "number") {
459                page = o.startPanel;
460                base.setCurrentPage(page);
461            }
462
463            // pause YouTube videos before scrolling or prevent change if playing
464            if (autoplay && o.isVideoPlaying(base)) { return; }
465
466            if (page > base.pages + 1 - base.adj) { page = (!o.infiniteSlides && !o.stopAtEnd) ? 1 : base.pages; }
467            if (page < base.adj ) { page = (!o.infiniteSlides && !o.stopAtEnd) ? base.pages : 1; }
468            base.currentPage = ( page > base.pages ) ? base.pages : ( page < 1 ) ? 1 : base.currentPage;
469            base.$currentPage = base.$items.eq(base.currentPage - base.adj);
470            base.exactPage = page;
471            base.$targetPage = base.$items.eq( (page === 0) ? base.pages - base.adj : (page > base.pages) ? 1 - base.adj : page - base.adj );
472            time = time || o.animationTime;
473            // don't trigger events when time = 1 - to prevent FX from firing multiple times on page resize
474            if (time >= 0) { base.$el.trigger('slide_init', base); }
475
476            base.slideControls(true, false);
477
478            // When autoplay isn't passed, we stop the timer
479            if (autoplay !== true) { autoplay = false; }
480            // Stop the slider when we reach the last page, if the option stopAtEnd is set to true
481            if (!autoplay || (o.stopAtEnd && page === base.pages)) { base.startStop(false); }
482
483            if (time >= 0) { base.$el.trigger('slide_begin', base); }
484
485            // delay starting slide animation
486            setTimeout(function(d){
487                // resize slider if content size varies
488                if (!o.resizeContents) {
489                    // animating the wrapper resize before the window prevents flickering in Firefox
490                    d = base.getDim(page);
491                    base.$wrapper.filter(':not(:animated)').animate(
492                        // prevent animating a dimension to zero
493                        { width: d[0] || base.width, height: d[1] || base.height },
494                        { queue: false, duration: (time < 0 ? 0 : time), easing: o.easing }
495                    );
496                }
497                d = {};
498                d[base.dir] = -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2];
499                // Animate Slider
500                base.$el.filter(':not(:animated)').animate(
501                    d, { queue: false, duration: time, easing: o.easing, complete: function(){ base.endAnimation(page, callback, time); } }
502                );
503            }, parseInt(o.delayBeforeAnimate, 10) || 0);
504        };
505
506        base.endAnimation = function(page, callback, time){
507            if (page === 0) {
508                base.$el.css( base.dir, -base.panelSize[base.pages][2]);
509                page = base.pages;
510            } else if (page > base.pages) {
511                // reset back to start position
512                base.$el.css( base.dir, -base.panelSize[1][2]);
513                page = 1;
514            }
515            base.exactPage = page;
516            base.setCurrentPage(page, false);
517            // Add active panel class
518            base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');
519
520            if (!base.hovered) { base.slideControls(false); }
521
522            if (time >= 0) { base.$el.trigger('slide_complete', base); }
523            // callback from external slide control: $('#slider').anythingSlider(4, function(slider){ })
524            if (typeof callback === 'function') { callback(base); }
525
526            // Continue slideshow after a delay
527            if (o.autoPlayLocked && !base.playing) {
528                setTimeout(function(){
529                    base.startStop(true);
530                // subtract out slide delay as the slideshow waits that additional time.
531                }, o.resumeDelay - (o.autoPlayDelayed ? o.delay : 0));
532            }
533        };
534
535        base.setCurrentPage = function(page, move) {
536            page = parseInt(page, 10);
537            if (base.pages < 1 || page === 0 || isNaN(page)) { return; }
538            if (page > base.pages + 1 - base.adj) { page = base.pages - base.adj; }
539            if (page < base.adj ) { page = 1; }
540
541            // Set visual
542            if (o.buildNavigation){
543                base.$nav
544                    .find('.cur').removeClass('cur').end()
545                    .find('a').eq(page - 1).addClass('cur');
546            }
547
548            // hide/show arrows based on infinite scroll mode
549            if (!o.infiniteSlides && o.stopAtEnd){
550                base.$wrapper
551                    .find('span.forward')[ page === base.pages ? 'addClass' : 'removeClass']('disabled').end()
552                    .find('span.back')[ page === 1 ? 'addClass' : 'removeClass']('disabled');
553                if (page === base.pages && base.playing) { base.startStop(); }
554            }
555
556            // Only change left if move does not equal false
557            if (!move) {
558                var d = base.getDim(page);
559                base.$wrapper
560                    .css({ width: d[0], height: d[1] })
561                    .add(base.$window).scrollLeft(0); // reset in case tabbing changed this scrollLeft - probably overly redundant
562                base.$el.css( base.dir, -base.panelSize[(o.infiniteSlides && base.pages > 1) ? page : page - 1][2] );
563            }
564            // Update local variable
565            base.currentPage = page;
566            base.$currentPage = base.$items.removeClass('activePage').eq(page - base.adj).addClass('activePage');
567
568        };
569
570        base.makeActive = function(){
571            // Set current slider as active so keyboard navigation works properly
572            if (!base.$wrapper.is('.activeSlider')){
573                $('.activeSlider').removeClass('activeSlider');
574                base.$wrapper.addClass('activeSlider');
575            }
576        };
577
578        // This method tries to find a hash that matches an ID and panel-X
579        // If either found, it tries to find a matching item
580        // If that is found as well, then it returns the page number
581        base.gotoHash = function(){
582            var h = base.win.location.hash,
583                i = h.indexOf('&'),
584                n = h.match(base.regex);
585            if (n === null && !/^#&/.test(h)) {
586                // #quote2&panel1-3&panel3-3
587                h = h.substring(0, (i >= 0 ? i : h.length));
588                // ensure the element is in the same slider
589                n = ($(h).closest('.anythingBase')[0] === base.el) ? $(h).closest('.panel').index() : null;
590            } else if (n !== null) {
591                // #&panel1-3&panel3-3
592                n = (o.hashTags) ? parseInt(n[1],10) : null;
593            }
594            return n;
595        };
596
597        base.setHash = function(n){
598            var s = 'panel' + base.runTimes + '-',
599                h = base.win.location.hash;
600            if ( typeof h !== 'undefined' ) {
601                base.win.location.hash = (h.indexOf(s) > 0) ? h.replace(base.regex, s + n) : h + "&" + s + n;
602            }
603        };
604
605        // Slide controls (nav and play/stop button up or down)
606        base.slideControls = function(toggle){
607            var dir = (toggle) ? 'slideDown' : 'slideUp',
608                t1 = (toggle) ? 0 : o.animationTime,
609                t2 = (toggle) ? o.animationTime: 0,
610                op = (toggle) ? 1 : 0,
611                sign = (toggle) ? 0 : 1; // 0 = visible, 1 = hidden
612            if (o.toggleControls) {
613                base.$controls.stop(true,true).delay(t1)[dir](o.animationTime/2).delay(t2);
614            }
615            if (o.buildArrows && o.toggleArrows) {
616                if (!base.hovered && base.playing) { sign = 1; op = 0; } // don't animate arrows during slideshow
617                base.$forward.stop(true,true).delay(t1).animate({ right: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
618                base.$back.stop(true,true).delay(t1).animate({ left: sign * base.$arrowWidth, opacity: op }, o.animationTime/2);
619            }
620        };
621
622        base.clearTimer = function(paused){
623            // Clear the timer only if it is set
624            if (base.timer) {
625                base.win.clearInterval(base.timer);
626                if (!paused && base.slideshow) {
627                    base.$el.trigger('slideshow_stop', base);
628                    base.slideshow = false;
629                }
630            }
631        };
632
633        // Pass startStop(false) to stop and startStop(true) to play
634        base.startStop = function(playing, paused) {
635            if (playing !== true) { playing = false; }  // Default if not supplied is false
636            base.playing = playing;
637
638            if (playing && !paused) {
639                base.$el.trigger('slideshow_start', base);
640                base.slideshow = true;
641            }
642
643            // Toggle playing and text
644            if (o.buildStartStop) {
645                base.$startStop.toggleClass('playing', playing).find('span').html( playing ? o.stopText : o.startText );
646                // add button text to title attribute if it is hidden by text-indent
647                if (parseInt(base.$startStop.find('span').css('text-indent'),10) < 0) {
648                    base.$startStop.addClass(o.tooltipClass).attr( 'title', playing ? o.stopText : o.startText );
649                }
650            }
651
652            // Pause slideshow while video is playing
653            if (playing){
654                base.clearTimer(true); // Just in case this was triggered twice in a row
655                base.timer = base.win.setInterval(function() {
656                    // prevent autoplay if video is playing
657                    if ( !o.isVideoPlaying(base) ) {
658                        base.goForward(true);
659                    // stop slideshow if resume if false
660                    } else if (!o.resumeOnVideoEnd) {
661                        base.startStop();
662                    }
663                }, o.delay);
664            } else {
665                base.clearTimer();
666            }
667        };
668
669        // Trigger the initialization
670        base.init();
671    };
672
673    $.anythingSlider.defaults = {
674        // Appearance
675        theme               : "default", // Theme name, add the css stylesheet manually
676        expand              : false,     // If true, the entire slider will expand to fit the parent element
677        resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
678        vertical            : false,     // If true, all panels will slide vertically; they slide horizontally otherwise
679        showMultiple        : false,     // Set this value to a number and it will show that many slides at once
680        easing              : "swing",   // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI
681
682        buildArrows         : true,      // If true, builds the forwards and backwards buttons
683        buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
684        buildStartStop      : true,      // ** If true, builds the start/stop button
685
686        appendForwardTo     : null,      // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
687        appendBackTo        : null,      // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
688        appendControlsTo    : null,      // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
689        appendNavigationTo  : null,      // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
690        appendStartStopTo   : null,      // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null
691
692        toggleArrows        : false,     // If true, side navigation arrows will slide out on hovering & hide @ other times
693        toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
694
695        startText           : "Start",   // Start button text
696        stopText            : "Stop",    // Stop button text
697        forwardText         : "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
698        backText            : "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
699        tooltipClass        : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
700
701        // Function
702        enableArrows        : true,      // if false, arrows will be visible, but not clickable.
703        enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
704        enableStartStop     : true,      // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
705        enableKeyboard      : true,      // if false, keyboard arrow keys will not work for this slider.
706
707        // Navigation
708        startPanel          : 1,         // This sets the initial panel
709        changeBy            : 1,         // Amount to go forward or back when changing panels.
710        hashTags            : true,      // Should links change the hashtag in the URL?
711        infiniteSlides      : true,      // if false, the slider will not wrap & not clone any panels
712        navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
713        navigationSize      : false,     // Set this to the maximum number of visible navigation tabs; false to disable
714
715        // Slideshow options
716        autoPlay            : true,     // If true, the slideshow will start running; replaces "startStopped" option
717        autoPlayLocked      : true,     // If true, user changing slides will not stop the slideshow
718        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
719        pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
720        stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
721        playRtl             : false,     // If true, the slideshow will move right-to-left
722
723        // Times
724        delay               : 3000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
725        resumeDelay         : 15000,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
726        animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
727        delayBeforeAnimate  : 0,         // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
728
729        // Callbacks - removed from options to reduce size - they still work
730
731        // Interactivity
732        clickForwardArrow   : "click",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
733        clickBackArrow      : "click",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
734        clickControls       : "click focusin", // Events used to activate navigation control functionality
735        clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
736
737        // Video
738        resumeOnVideoEnd    : true,      // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
739        addWmodeToObject    : "opaque",  // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
740        isVideoPlaying      : function(base){ return false; } // return true if video is playing or false if not - used by video extension
741
742    };
743
744    $.fn.anythingSlider = function(options, callback) {
745
746        return this.each(function(){
747            var page, anySlide = $(this).data('AnythingSlider');
748
749            // initialize the slider but prevent multiple initializations
750            if ((typeof(options)).match('object|undefined')){
751                if (!anySlide) {
752                    (new $.anythingSlider(this, options));
753                } else {
754                    anySlide.updateSlider();
755                }
756            // If options is a number, process as an external link to page #: $(element).anythingSlider(#)
757            } else if (/\d/.test(options) && !isNaN(options) && anySlide) {
758                page = (typeof(options) === "number") ? options : parseInt($.trim(options),10); // accepts "  2  "
759                // ignore out of bound pages
760                if ( page >= 1 && page <= anySlide.pages ) {
761                    anySlide.gotoPage(page, false, callback); // page #, autoplay, one time callback
762                }
763            // Accept id or class name
764            } else if (/^[#|.]/.test(options) && $(options).length) {
765                anySlide.gotoPage(options, false, callback);
766            }
767        });
768    };
769
770})(jQuery);
Jose Jimenez
RE: Implementing a sliding banner theme using jquery.
November 2, 2012 1:36 AM
Answer

Jose Jimenez

LIFERAY STAFF

Rank: Regular Member

Posts: 151

Join Date: August 22, 2012

Recent Posts

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

 1   javascript.barebone.files=\
 2        \
 3        #
 4        # YUI core
 5        #
 6        \
 7        aui/yui/yui.js,\
 8        \
 9
10[...] ..... keep all the js dependencies of Liferay Portal  ....... [...]
11
12        \
13        #
14        # Add your dependencies
15        #
16        \
17        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
RE: Implementing a sliding banner theme using jquery.
November 2, 2012 1:44 AM
Answer

pawan chauhan

Rank: Junior Member

Posts: 75

Join Date: October 8, 2012

Recent Posts

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 Jimenez
RE: Implementing a sliding banner theme using jquery.
November 2, 2012 2:28 AM
Answer

Jose Jimenez

LIFERAY STAFF

Rank: Regular Member

Posts: 151

Join Date: August 22, 2012

Recent Posts

Hi again emoticon

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:

1<script type="text/javascript">
2$(document).ready(
3function() {
4
5/** your code **/
6
7 });
8</script>


Can it be your problem?
pawan chauhan
RE: Implementing a sliding banner theme using jquery.
November 2, 2012 2:39 AM
Answer

pawan chauhan

Rank: Junior Member

Posts: 75

Join Date: October 8, 2012

Recent Posts

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 :
 1
 2<script>
 3            $(function () {
 4                $('#announcemenCarousel').anythingSlider({
 5                    //            theme : 'metallic',
 6                    expand       : false,
 7                    autoPlay     : true
 8                });
 9                $('#homeRightNews').anythingSlider({
10                    //            theme : 'metallic',
11                    expand       : false,
12                    autoPlay     : true
13                });
14                $('#headerCarousel').anythingSlider({
15                    //            theme : 'metallic',
16                    expand       : false,
17                    autoPlay     : true,
18                    navigationFormatter : function(index, panel){ // Format navigation labels with text
19                        return ['text1', 'text2', 'text3', 'text4', 'text5'][index - 1];
20                    }
21                });
22
23
24            });
25        </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

 1<!DOCTYPE html>
 2
 3#parse ($init)
 4
 5<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">
 6
 7<head>
 8    <title>$the_title - $company_name</title>
 9
10    $theme.include($top_head_include)
11</head>
12
13<body class="$css_class">
14
15$theme.include($body_top_include)
16
17#if ($is_signed_in)
18    #dockbar()
19#end
20
21<div id="wrapper">
22    <a href="#main-content" id="skip-to-content">#language("skip-to-content")</a>
23
24    <header id="banner" role="banner">
25        <div id="heading">
26            <h1 class="site-title">
27                <a class="$logo_css_class" href="$site_default_url" title="#language("go-to") $site_name">
28                    <img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width" />
29                </a>
30
31                #if ($show_site_name)
32                    <span class="site-name" title="#language("go-to") $site_name">
33                        $site_name
34                    </span>
35                #end
36            </h1>
37
38            <h2 class="page-title">
39                <span>$the_title</span>
40            </h2>
41        </div>
42
43        #if (!$is_signed_in)
44            <a href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>
45        #end
46
47        #if ($has_navigation || $is_signed_in)
48            #parse ("$full_templates_path/navigation.vm")
49        #end
50    </header>
51
52    <div id="content">
53        <nav class="site-breadcrumbs" id="breadcrumbs">
54            <h1>
55                <span>#language("breadcrumbs")</span>
56            </h1>
57
58            #breadcrumbs()
59        </nav>
60
61        #if ($selectable)
62            $theme.include($content_include)
63        #else
64            $portletDisplay.recycle()
65
66            $portletDisplay.setTitle($the_title)
67
68            $theme.wrapPortlet("portlet.vm", $content_include)
69        #end
70    </div>
71
72    <footer id="footer" role="contentinfo">
73        <p class="powered-by">
74            #language("powered-by") <a href="http://www.liferay.com" rel="external">Liferay</a>
75        </p>
76    </footer>
77</div>
78
79$theme.include($body_bottom_include)
80
81</body>
82
83$theme.include($bottom_include)
84
85</html>
pawan chauhan
RE: Implementing a sliding banner theme using jquery.
November 2, 2012 2:58 AM
Answer

pawan chauhan

Rank: Junior Member

Posts: 75

Join Date: October 8, 2012

Recent Posts

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.


 1
 2<script>
 3            $(function () {
 4               
 5                $('#headerCarousel').anythingSlider({
 6                    //            theme : 'metallic',
 7                    expand       : false,
 8                    autoPlay     : true,
 9                    navigationFormatter : function(index, panel){ // Format navigation labels with text
10                        return ['text1', 'text2', 'text3', 'text4', 'text5'][index - 1];
11                    }
12                });
13
14
15            });
16        </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 Jimenez
RE: Implementing a sliding banner theme using jquery.
November 2, 2012 3:39 AM
Answer

Jose Jimenez

LIFERAY STAFF

Rank: Regular Member

Posts: 151

Join Date: August 22, 2012

Recent Posts

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
RE: Implementing a sliding banner theme using jquery.
November 2, 2012 3:49 AM
Answer

pawan chauhan

Rank: Junior Member

Posts: 75

Join Date: October 8, 2012

Recent Posts

yes i am having javascript errors,

when i put the script tag in normal_portal.vm as :
 1
 2<script>
 3            $(function () {
 4                $('#banner').anythingSlider({
 5                    //            theme : 'metallic',
 6                    expand       : false,
 7                    autoPlay     : true,
 8                    navigationFormatter : function(index, panel){ // Format navigation labels with text
 9                        return ['text1', 'text 2', 'text 3', 'text 4', 'text 5'][index - 1];
10                    }
11                });
12
13
14            });
15 </script>


I get the folowing script errors.

 1
 2Webpage error details
 3
 4User 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)
 5Timestamp: Fri, 2 Nov 2012 10:44:35 UTC
 6
 7
 8Message: 'undefined' is null or not an object
 9Line: 21
10Char: 2
11Code: 0
12URI: http://localhost:8080/SbiConnect-theme/js/jquery.anythingslider.js
13
14
15Message: Object expected
16Line: 1
17Char: 14
18Code: 0
19URI: http://localhost:8080/web/pawan/hom



 1
 2Webpage error details
 3
 4User 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)
 5Timestamp: Fri, 2 Nov 2012 10:44:52 UTC
 6
 7
 8Message: 'undefined' is null or not an object
 9Line: 21
10Char: 2
11Code: 0
12URI: http://localhost:8080/SbiConnect-theme/js/jquery.anythingslider.js
13
14
15Message: Object expected
16Line: 1
17Char: 14
18Code: 0
19URI: 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 Jimenez
RE: Implementing a sliding banner theme using jquery.
November 2, 2012 6:14 AM
Answer

Jose Jimenez

LIFERAY STAFF

Rank: Regular Member

Posts: 151

Join Date: August 22, 2012

Recent Posts

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 :

1<script>
2            $(function () {
3alert( $('#banner').html());
4});
5</script>


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

1<script>
2$(document).ready(
3  function () {
4  alert( $('#banner').html());
5});
6</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
RE: Implementing a sliding banner theme using jquery.
November 2, 2012 7:24 AM
Answer

pawan chauhan

Rank: Junior Member

Posts: 75

Join Date: October 8, 2012

Recent Posts

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
RE: Implementing a sliding banner theme using jquery.
November 5, 2012 12:38 AM
Answer

pawan chauhan

Rank: Junior Member

Posts: 75

Join Date: October 8, 2012

Recent Posts

Hi jose,

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

Thanks for all the help.
Jose Jimenez
RE: Implementing a sliding banner theme using jquery.
November 5, 2012 12:44 AM
Answer

Jose Jimenez

LIFERAY STAFF

Rank: Regular Member

Posts: 151

Join Date: August 22, 2012

Recent Posts

Perfect, I'm glad to hear this.
You are welcome.
Jose Jimenez
RE: Implementing a sliding banner theme using jquery.
November 5, 2012 12:47 AM
Answer

Jose Jimenez

LIFERAY STAFF

Rank: Regular Member

Posts: 151

Join Date: August 22, 2012

Recent Posts

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
RE: Implementing a sliding banner theme using jquery.
November 5, 2012 1:35 AM
Answer

pawan chauhan

Rank: Junior Member

Posts: 75

Join Date: October 8, 2012

Recent Posts

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 emoticon

Thanks.