- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
JS Animated. How to change Camera slider dimensions
March 3, 2014
This tutorial is going to show you how to change slider image dimensions on your Website template.
JS Animated. How to change Camera slider dimensionsGo to the /images/ folder and replace one of the slider images with a new slider image that has different dimensions. For instance, if the original slider image is called slide.jpg, you will need to replace it with your new slide.jpg file. Or, if your new slider image is called slide3.jpg, just insert it into the images folder and change the name in the html code.
If you open the index.html file in your web browser, you will see that the image is replaced but looks somewhat stretched.
To fix this, you need to find out what your new image dimensions are. E.g. 1200 X 600 pixels.
Using the Firebug plugin for Firefox look for <div id="camera_wrap"> as shown below (the div id may differ depending on your template number):
Add a new property to this class selector like width: 1200px ! important; (where 1200px is the width of your new slider image). This will prevent your image from looking stretched.
Add one more property to the same class selector like margin: 0 auto; in order to center your image.
Now you need to copy the edited class selector from Firebug and replace the original one with it:
.camera_wrap { display: none; margin: 0 auto; overflow: visible !important; position: relative; width: 1200px !important; z-index: 0; }
Save the changes made to the camera.css file.
Open the index.html file where you have the slider code in Adobe Dreamweaver or any code editor. Look for initializing slider script between the two <script></script> tags:
$(document).ready(function(){ jQuery('#camera_wrap').camera({ loader: false, pagination: true , minHeight: '250', thumbnails: false, height: '42.6%', caption: false, navigation: false, fx: 'mosaic' }); $().UItoTop({ easingType: 'easeOutQuart' }); })
Since your new image width is 1200px and its height is 600px, the new percentage should be 50% (600/1200*100=50). Change height: ‘42.6%’ to height: ‘50%’, and save the changes.
Your slider image should now be displayed with its dimensions changed.
And it has the following style in /site/css/camera.css:
.camera_wrap { display: none; margin-bottom: 0 !important; overflow: visible !important; position: relative; z-index: 0; }
Feel free to check the detailed video tutorial below:
JS Animated. How to change Camera slider dimensions