Categories

Featured templates

JS Animated. How to change Camera slider dimensions

Norman Fisher March 3, 2014
Rating: 5.0/5. From 1 vote.
Please wait...

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
This entry was posted in JS Animated tutorials and tagged camera, change, dimensions, slider. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket