1) Creating Complete Background Image
slide show using jQuery+ Web Content
Structure+ Web Content Layout.
1] Login to
Liferay as admin.
2] Go to
control panel—Image Galary—Create Folder—‘Surprized Slide show’
--
Upload images for slide show
3] Go to
control panel—Document Library—Crate Folder –‘Surprized Slide Show’
---
Upload files :
css/supersized.css
theme/supersized.shutter.css
css/external.css
js/jquery.min.js
js/jquery.easing.min.js
js/supersized.3.2.6.js
theme/supersized.shutter.min.js
js/external.js
4] Control
Panel-Web Conent –Structures Tab: Add Structure:
<root>
<dynamic-element name='supersized_css'
type='document_library' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='supersized_shutter_css'
type='document_library' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='external_css'
type='document_library' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='jquery_min_js'
type='document_library' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='jquery_easing_min_js'
type='document_library' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='supersized_js'
type='document_library' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='supersized_shutter_min_js'
type='document_library' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='external_js'
type='document_library' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='SlideBox'
type='text' index-type='' repeatable='true'>
<dynamic-element name='big_image_src'
type='image_gallery' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='thumb_image_src'
type='image_gallery' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='image_link'
type='link_to_layout' index-type='' repeatable='false'>
dynamic-element>
<dynamic-element name='image_title'
type='text' index-type='' repeatable='false'>
dynamic-element>
dynamic-element>
root>
<root>
<dynamic-element name='supersized_shutter_css'
type='document_library' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='external_css'
type='document_library' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='supersized_css'
type='document_library' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='jquery_min_js'
type='document_library' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='jquery_easing_min_js'
type='document_library' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='supersized_js'
type='document_library' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='supersized_shutter_min_js'
type='document_library' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='external_js'
type='document_library' index-type='' repeatable='false'>dynamic-element>
<dynamic-element name='SlideBox'
type='text' index-type='' repeatable='true'>
<dynamic-element name='big_image_src'
type='document_library' index-type='' repeatable='false'> dynamic-element>
<dynamic-element name='thumb_image_src'
type='document_library' index-type='' repeatable='false'> dynamic-element>
<dynamic-element name='image_link'
type='document_library' index-type='' repeatable='false'> dynamic-element>
<dynamic-element name='image_title'
type='document_library' index-type='' repeatable='false'>dynamic-element>
dynamic-element>
root>
5] Control
Panel –Web Content –Template Tab : Add template
Fill name,
description and select structure liferay-background-slide-show-structure
Launch editor.
<link href="$supersized_css.getData()"
rel="stylesheet" type="text/css" />
<link href="$supersized_shutter_css.getData()"
rel="stylesheet" type="text/css" />
<link href="$external_css.getData()"
rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="$jquery_min_js.getData()"> script>
<script type="text/javascript"
src="$jquery_easing_min_js.getData()"> script>
<script type="text/javascript"
src="$supersized_js.getData()"> script>
<script type="text/javascript"
src="$supersized_shutter_min_js.getData()"> script>
<script type="text/javascript"
src="$external_js.getData()"> script>
<script type="text/javascript">
var SlideArry = []
script>
#foreach
($item in $SlideBox.getSiblings())
#foreach
( $itemData in $item.getChildren() )
#if
( "$itemData.getName()" == "big_image_src" )
#set
( $big_image_src = $itemData.getData() )
#elseif
( "$itemData.getName()" == "thumb_image_src" )
#set
( $thumb_image_src = $itemData.getData() )
#elseif
( "$itemData.getName()" == "image_title" )
#set
( $image_title = $itemData.getData() )
#elseif
( "$itemData.getName()" == "image_link" )
#set
( $image_link = $itemData.getData() )
#end
#end
<script type="text/javascript">
var slide1 = {image : '$big_image_src',
title : '$image_title',
thumb : '$thumb_image_src',
url : '$image_link'
};
SlideArry.push(slide1);
script>
#end
<div id="prevthumb">div>
<div id="nextthumb">div>
<a id="prevslide"
class="load-item">a>
<a id="nextslide"
class="load-item">a>
<div id="thumb-tray"
class="load-item">
<div id="thumb-back">div>
<div id="thumb-forward">div>
div>
<div id="progress-back"
class="load-item">
<div id="progress-bar">div>
div>
<div id="controls-wrapper"
class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/>a>
<div id="slidecounter">
<span class="slidenumber">span> / <span class="totalslides">span>
div>
<div id="slidecaption">div>
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/>a>
<ul id="slide-list">ul>
div>
div>
Save it.
6] Go to
page -->Add web contnt display--> click on add icon
Select
structure as ‘liferay-background-slide-show-structure’.
Fill form:
Name: supersized
Slide show
Supersized –shutter-css
: Select supersized -shutter.css from document library.
supersized_css:
Select supersized.css from document library.
external_css:
Select external.css from document library.
jquery_min_js:
Select jquery_min.js from document library.
jquery_easing_min_js:
Select jquery_easing_min_js.js from document library.
supersized_shutter_min_js:
Select supersized_shutter_min_js.js from document library.
external_js:
Select external_js.js from document
library.
SlideBox :
Box1
big_image_src:
Select image from Image Galary .
thumb_image_src:
Select image from Image Galary .
image_link:
Select page to come on click of image.
image_title:
Select title to come on image.
Repeat SlideBox,
big_image_src, thumb_image_src, image_link and image_title to get multiple
images .
7] Save and
Publish.
Done.
------------------------------------------------
external_css:
ul#demo-block{ margin:0 15px 15px
15px; }
ul#demo-block li{ margin:0 0 10px
0; padding:10px; display:inline; float:left; clear:both; color:#aaa;
background:url('img/bg-black.png'); font:11px Helvetica,
Arial, sans-serif; }
ul#demo-block li
a{ color:#eee; font-weight:bold; }
-------------------------------------------------
external_js:
jQuery(function(jQuery){
jQuery.supersized({
// Functionality
Slideshow:1, //Slideshow on/off
autoplay :1, // Slideshow
starts playing automatically
start_slide:1, // Start slide (0
is random)
stop_loop: 0, // Pauses slideshow on last slide
random :
0, //
Randomize slide order (Ignores start slide)
slide_interval: 3000, // Length between
transitions
transition: 6,// 0-None, 1-Fade,
2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel
Right, 7-Carousel Left
transition_speed: 1000, // Speed of
transition
new_window: 1, // Image links
open in new window/tab
pause_hover: 0, // Pause slideshow
on hover
keyboard_nav: 1, // Keyboard
navigation on/off
performance: 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality,
3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width: 0, // Min width allowed (in pixels)
min_height: 0, // Min height allowed (in pixels)
vertical_center: 1, // Vertically center background
horizontal_center: 1, // Horizontally center background
fit_always: 0, // Image will never exceed browser width or height (Ignores min.
dimensions)
fit_portrait: 1, // Portrait images will not exceed browser
height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links: 'blank', // Individual links for each slide (Options: false, 'num',
'name', 'blank')
thumb_links: 1, // Individual thumb links for each slide
thumbnail_navigation: 0, // Thumbnail
navigation
slides: SlideArry,
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
});
1 comment:
I am using Liferay 6.1.1
When i am trying to upload the structure the following error gets poped up:
Please enter a valid XML schema definition.
My structure data is:
Kindly please help.
Post a Comment