Hi friends i am back with new stuff for liferay.Follow this Steps and you will see template working
Create Structure
1)Go to Control panel click on web content in left panel.
2)Now Click on structure on top side of page now add name and description of the your template.
3)Now at bottom there is XML Schema Definition.
4)Click on Add Row and create whole xml schema as below figure.
5)Now Click on save.
Create Template
1)Go to template as shown from above steps.
2)Give Name and Description.
3)Now select the structure you have just created.
4)Now Click on Launch Editor and write this code as shown below.
<html>
<head>
<style>
.cloud-zoom-lens{
border: 4px solid #888;
margin:-4px; /* Set this to minus the border thickness. */
background-color:#fff;
cursor:move;
}
.cloud-zoom-big {
border:4px solid #ccc;
overflow:hidden;
}
.cloud-zoom-loading {
color:white;
background:#222;
padding:3px;
border:1px solid #000;
}
</style>
<script type="text/javascript" src="/Jquery/cloud-zoom/js/jquery.min.js"></script>##(Give path of your liferay Folder where you have put the whole code)
<script type="text/javascript" src="/Jquery/cloud-zoom/js/cloud-zoom.1.0.2.js"></script>##(Give path of your liferay Folder)
</head>
<body>
#set ( $str1 = "px")
<table border="1" width="100%">
#foreach($cp in $big.getSiblings())
<tr>
<td>
<a href='$cp.getData() ' class = 'cloud-zoom' id='zoom1' ><img src="$cp.small.data" style="width:$width.getData()$str1;height:$height.getData()$str1;" /></a></li></ul>
</td>
<td>
$cp.text.data
</td>
</tr>
#end
</table>
</body>
</html>
5)Click on Save .
Web Content Display
1)open Web content and Template which you have recently created.
2)Give image Height and width you want in a table.
3)There should be two images 1 should be bigger image i.e zoom image and other should be smaller image that should be seen on page.
4)Upload both images and select images
5)Now on Text field write the text you want to be shown beside your image.
6)You can add other images by pressing + button
7)Your Template should look like this.
On Zooming:
On Zoom Out:
.png)
Note:Save this Both jquery in your Computer open it and save it in webapps folder of liferay bundle and set the path of both jquery .
1)cloud-zoom.1.0.2.js
2)jquery.min.js
3)Cloud Zoom
If any query plz do comment or mail us at:
chiragmsc007it@gmail.com
mehdisunasara@gmail.com
Create Structure
1)Go to Control panel click on web content in left panel.
2)Now Click on structure on top side of page now add name and description of the your template.
3)Now at bottom there is XML Schema Definition.
4)Click on Add Row and create whole xml schema as below figure.
5)Now Click on save.
Create Template
1)Go to template as shown from above steps.
2)Give Name and Description.
3)Now select the structure you have just created.
4)Now Click on Launch Editor and write this code as shown below.
<html>
<head>
<style>
.cloud-zoom-lens{
border: 4px solid #888;
margin:-4px; /* Set this to minus the border thickness. */
background-color:#fff;
cursor:move;
}
.cloud-zoom-big {
border:4px solid #ccc;
overflow:hidden;
}
.cloud-zoom-loading {
color:white;
background:#222;
padding:3px;
border:1px solid #000;
}
</style>
<script type="text/javascript" src="/Jquery/cloud-zoom/js/jquery.min.js"></script>##(Give path of your liferay Folder where you have put the whole code)
<script type="text/javascript" src="/Jquery/cloud-zoom/js/cloud-zoom.1.0.2.js"></script>##(Give path of your liferay Folder)
</head>
<body>
#set ( $str1 = "px")
<table border="1" width="100%">
#foreach($cp in $big.getSiblings())
<tr>
<td>
<a href='$cp.getData() ' class = 'cloud-zoom' id='zoom1' ><img src="$cp.small.data" style="width:$width.getData()$str1;height:$height.getData()$str1;" /></a></li></ul>
</td>
<td>
$cp.text.data
</td>
</tr>
#end
</table>
</body>
</html>
5)Click on Save .
Web Content Display
1)open Web content and Template which you have recently created.
2)Give image Height and width you want in a table.
3)There should be two images 1 should be bigger image i.e zoom image and other should be smaller image that should be seen on page.
4)Upload both images and select images
5)Now on Text field write the text you want to be shown beside your image.
6)You can add other images by pressing + button
7)Your Template should look like this.
On Zooming:
On Zoom Out:
.png)
Note:Save this Both jquery in your Computer open it and save it in webapps folder of liferay bundle and set the path of both jquery .
1)cloud-zoom.1.0.2.js
2)jquery.min.js
3)Cloud Zoom
If any query plz do comment or mail us at:
chiragmsc007it@gmail.com
mehdisunasara@gmail.com
This is very essential segment to create the zoom while mouse over on the image in Ecommerce websites.
ReplyDeleteWeb Development Company | Website Design Companies
Thank you
DeleteThanks for sharing ideas and thought,I like the right and bright things in your blog and would bookmark this blog for further use.
ReplyDeleteWeb Design Company Bangalore| Web Design Bangalore|
Thanks alot
Delete