1) Creating Image slide show using jQuery
+ Web Content Structure+ Web
Content Layout.
Link:
http://www.liferay.com/
Steps:
1] Login to Liferay as
admin.
2] Go to control panel .
3] Click On Image
Gallery Panel :
-- Create New folder 'slide show Image'
-- Upload Images in it.
4] Click On Web Content
Panel.
5] Click On Web Content
Panel's 'Structues' Tab.
6] Click On Add Structur
button to add new one.
--- Fill The Form
--- Check Autogenerate ID Check Box
--- Enter name as 'Slide Show'
--- Enter description as 'Slide Show'
--- Click On Launch Editor : pop up window
will display .
Enter in it:
<root>
<dynamic-element name='js' type='text_box' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='css' type='text_box' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='banner' type='image_gallery' index-type='' repeatable='true'>
<dynamic-element name='link' type='link_to_layout' index-type='' repeatable='false'> dynamic-element>
<dynamic-element name='text' type='text' index-type='' repeatable='false'>dynamic-element>
dynamic-element>
root>
(Copy
Content from Liferay Slide Show Structure.xml )
--- Click on save and Continue.
---
Structure is ready.
7]
Click On Web Content Panel's 'Templates' Tab.
9] Click On Add Template button to add new
one.
--- Fill The Form
--- Check Autogenerate ID Check Box
--- Enter name as 'Slide Show'
--- Enter description as 'Slide Show'
--- Select Structure as 'Slide show '
(which we have created in step 6)
--- Click On Launch Editor : pop up window
will display .
Enter in it
:
<style type="text/css">
$css.getData()
style>
<script type="text/javascript">
$js.getData()
script>
<article class="banner-nav"
id="banner-nav">
<h1 class="heading">
Banners
h1>
#foreach
($e_banner in $banner.getSiblings())
#set($e_banner_image
= $e_banner.getData().replaceAll("&",
"&").replaceAll("&", "&"))
#set($e_banner_text
= $e_banner.getChild("text").getData())
#set($e_banner_link
= $e_banner.getChild("link").getFriendlyUrl())
<a class="banner"
href="$e_banner_link" style="background-image: url($e_banner_image);">
<p>
$e_banner_text
p>
a>
#end
#set
($banner_count = 0)
<menu class="menu">
<a class="playpause" href="javascript:bannerNav.playpause();">Play / Pausea>
<a class="prev" href="javascript:bannerNav.prev();">Previousa>
#foreach
($e_banner in $banner.getSiblings())
<a class="item" href="javascript:bannerNav.toBanner($banner_count);">$banner_counta>
#set
($banner_count = $banner_count + 1)
#end
<a class="next" href="javascript:bannerNav.next();">Nexta>
menu>
article>
---
Click on save and Continue.
---
Template is ready.
10]
go to main site (out of control panel)
11] Drop a web content portlet on page. Click
on new one Icon.
---
New Web Content Web Form will come.
---
Enter name as Slide show.
--- Select Structure 'Slide show'
---
Select template 'Slide show'
---
Now fill the form:
in js field :
--- Copy Content from “liferayslideshow.js”
in css field :
--- Copy Content from “liferayslideshow.css”
In Banner
field Select Image from Image galary slide show folder .
In Link Box
select a page to redirect.
In text Box
Enter Message that u want to display with image.
Repeat
Banner ,Link and text Box on click of plus sign.
-- Publish
web content.
-- Done
-----------------------------------------------------------------------
liferayslideshow.js :
AUI().use('get', function(A)
{ A.Get.script('http://code.jquery.com/jquery-1.4.4.min.js',
{
onSuccess:
function()
{
bannerNav = {};
(
function () {
var item = 0,
busy = false,
paused = true,
interval = null,
animationSpeed = 0.6,
animationInterval = 12,
menuOpacityOff = 0.75,
menuOpacityOn = 1,
jQuery_banner,
jQuery_banner_each,
jQuery_banner_menu,
jQuery_banner_item,
jQuery_banner_play,
jQuery_banner_img = new Image();
jQuery(document).ready(
function () {
jQuery_banner = jQuery('#banner-nav');
if (!jQuery_banner.length)
{
return;
}
jQuery_banner_each = jQuery_banner.children('.banner');
jQuery_banner_menu = jQuery_banner.children('.menu');
jQuery_banner_item = jQuery_banner_menu.children('.item');
jQuery_banner_play =
jQuery_banner_menu.children('.playpause');
item = Math.round(Math.random() *
jQuery_banner_each.length) - 1;
bannerNav.toBanner = function (to, animationTime)
{
if (busy || item === to) {
return;
} else {
busy = true;
}
jQuery_banner_item.eq(item).removeClass('selected');
jQuery_banner_item.eq(to).addClass('selected').css('opacity', 0).css('opacity', 1).blur();
jQuery_banner_each.eq(to).css('zIndex', 3).animate(
{
opacity:
1
},
animationTime,
function () {
jQuery_banner_each.eq(item).css(
{opacity:
0,zIndex: 1}
);
jQuery_banner_each.eq(to).css('zIndex', 2);
item = to;
busy = false;
}
);
};
bannerNav.setInterval = function ()
{
jQuery_banner_play.removeClass('paused');
paused
= false;
interval
= setInterval(function ()
{
bannerNav.toBanner(item + 1 >
jQuery_banner_each.length - 1 ? 0 : item + 1, animationSpeed * 1000);
},
animationInterval
* 1000
);
};
bannerNav.clearInterval = function () {
jQuery_banner_play.addClass('paused');
paused = true;
clearInterval(interval);
};
bannerNav.playpause = function ()
{if (paused)
{
setTimeout(function ()
{
bannerNav.next(animationSpeed
* 1000);
},250
);
}
else
{
bannerNav.clearInterval();
}
};
bannerNav.prev = function (animationTime)
{
bannerNav.clearInterval();
bannerNav.toBanner(item - 1 < 0 ?
jQuery_banner_each.length - 1 : item - 1, animationTime || 1);
bannerNav.setInterval(); };
bannerNav.next = function (animationTime)
{
bannerNav.clearInterval();
bannerNav.toBanner(item + 1 >
jQuery_banner_each.length - 1 ? 0 : item + 1, animationTime || 1);
bannerNav.setInterval();
};
jQuery_banner_item.eq(item).addClass('selected');
jQuery_banner_menu.css('opacity', menuOpacityOff);
jQuery_banner_img.onload = function ()
{
jQuery_banner.bind('mouseenter',function ()
{
jQuery_banner_menu.animate({ opacity: menuOpacityOn
},150)
}).bind('mouseleave',function ()
{
jQuery_banner_menu.animate(
{opacity: menuOpacityOff},300);
}
);
jQuery_banner_each.eq(item).css({opacity: 1, zIndex: 2});
bannerNav.setInterval();};
if (item < 0) {
item
= 0;
}
jQuery_banner_img.src =
jQuery_banner_each.eq(item).css('background-image').replace(/^.*url\("{0,}|"{0,}\).*$/g, '');
}
);
}()
);
/* For HTML5 support in IE */
(function(){if(!/*@cc_on!@*/0)return;
var e = 'abbr,article,aside,audio,canvas,datalist,details,figure,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video'.split(','),i=e.length+1;
while(--i)
{document.createElement(e[i])}})();
}
}
);
}
);
------------------------------------------------------------------------------
liferayslideshow.css
.banner-nav {
display: block;
margin: 10px
auto;
width: 940px;
}
.banner-nav {
-moz-box-shadow: 0 1px
2px rgba(0,
0, 0,
0.7);
-webkit-box-shadow: 0
1px 2px
rgba(0, 0,
0, 0.7);
background-align: center;
background-image: url(http://cdn.www.liferay.com/osb-theme/images/custom/banner-nav_loading.gif);
background-repeat: no-repeat;
margin-bottom: 18px;
margin-left: 2px;
margin-right: 2px;
overflow: hidden;
position: relative;
}
.banner-nav,
.banner-nav .banner {
height: 253px;
}
.banner-nav,
.banner-nav .heading {
clear: both;
}
.banner-nav,
.banner-nav .menu,
.banner-nav a {
-moz-border-radius:
5px;
-webkit-border-radius: 5px;
}
.banner-nav .heading {
height: 0;
}
.banner-nav a,
.banner-nav .menu {
display: block;
}
.banner-nav a {
float: left;
left: 0;
outline: 0;
position: absolute;
top: 0;
width: 100%;
}
.banner-nav .menu .item {
height: 9px;
margin: 4px
3px;
width: 9px;
z-index: 1;
}
.banner-nav .playpause {
background-image:
url(http://cdn.www.liferay.com/osb-theme/images/custom/banner-nav_pause.png);
}
.banner-nav .paused {
background-image:
url(http://cdn.www.liferay.com/osb-theme/images/custom/banner-nav_play.png);
}
.banner-nav .prev {
background-image:
url(http://cdn.www.liferay.com/osb-theme/images/custom/banner-nav_prev.png);
}
.banner-nav .next {
background-image:
url(http://cdn.www.liferay.com/osb-theme/images/custom/banner-nav_next.png);
}
.banner-nav .heading,
.banner-nav .banner p,
.banner-nav .menu a {
font-size: 0;
line-height: 0;
overflow: hidden;
position: relative;
text-indent: -9999em;
zoom: 1;
}
.banner-nav .menu {
bottom: 6px;
margin: 0;
opacity: 1;
padding: 3px;
position: absolute;
right: 6px;
z-index: 5;
}
.banner-nav .banner {
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.banner-nav,
.banner-nav .menu {
background-color:
#000;
}
.banner-nav .menu a {
-moz-border-radius:
9px;
-webkit-border-radius: 9px;
background-color: #474A4B;
background-position: center;
background-repeat: no-repeat;
height: 18px;
margin: 0
3px;
width: 18px;
}
.banner-nav .menu .selected {
background-color:
#FFF;
}
-----------------------------------------------------------------------------------
1 comment:
I do not understand part of step:
5] Click On Web Content Panel's 'Structues' Tab.
6] Click On Add Structur button to add new one.
--- Fill The Form
--- Check Autogenerate ID Check Box
--- Enter name as 'Slide Show'
--- Enter description as 'Slide Show'
--- Click On Launch Editor : pop up window will display .
I use liferay 6.1.1, I do not find "Web Content Panel's 'Structues' Tab"
How I want to make a slide show as toturial on using Liferay 6.1.1?
Post a Comment