Tuesday, 25 June 2013

Create Image zoom Jquery using Structure and templates.

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:

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