If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to change Camera slider dimensions

This tutorial is going to show you how to change slider image dimensions on your Website template.

JS Animated. How to change Camera slider dimensions

  1. Go 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.

  2. If you open the index.html file in your web browser, you will see that the image is replaced but looks somewhat stretched.

    js_animated_camera_slider_dimensions_changing_1

  3. To fix this, you need to find out what your new image dimensions are. E.g. 1200 X 600 pixels.

    js_animated_camera_slider_dimensions_changing_2

  4. 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):

    js_animated_camera_slider_dimensions_changing_3

  5. 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;
    }
    
  6. 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.

    js_animated_camera_slider_dimensions_changing_4

  7. Add one more property to the same class selector like margin: 0 auto; in order to center your image.

    js_animated_camera_slider_dimensions_changing_5

  8. 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;
    }
    

    js_animated_camera_slider_dimensions_changing_6

  9. Save the changes made to the camera.css file.

  10. 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.

  11. Your slider image should now be displayed with its dimensions changed.

    js_animated_camera_slider_dimensions_changing_7

Feel free to check the detailed video tutorial below:

JS Animated. How to change Camera slider dimensions