I want to create the slideshow of pany labels that are of a certain size. I use the script camera.js to create the slideshow and I need to change the image size:

<link 
    rel='stylesheet' 
    id='camera-css'  
    href='/html/themes/classic/css/camera.css' 
    type='text/css' media='all'> 

<style>
    .fluid_container {
        margin: 0 auto;
        max-width: 1000px;
        width: 100%;
    }
</style>

<script>
    jQuery(function(){
        jQuery('#camera_wrap_3').camera({
            height: '50%',
            pagination: true,
            thumbnails: false,
            imagePath: '/html/themes/classic/images/'
        });
    });
</script>

<div class="fluid_container">
    <div 
        class="camera_wrap camera_emboss" 
        id="camera_wrap_3">
        <div 
            data-thumb="/thumbs/1.jpg" 
            data-src="/slides/1.jpg" 
            data-time="1500" 
            data-trasPeriod="4000" 
            data-link="some link here" 
            data-target="_blank">
                <div 
                    class="camera_caption fadeFromBottom">
                some text here
                </div>
        </div>
        <div 
            data-thumb="/thumbs/2.jpg" 
            data-src="/slides/2.jpg" 
            data-time="1500" 
            data-trasPeriod="4000" 
            data-link="some link here" 
            data-target="_blank">
                <div 
                    class="camera_caption fadeFromBottom">
                some text here
                </div>
        </div>
    </div>
</div>

<div style="clear:both; display:block; height:100px"></div>

Here are some screenshots.

For max-width == 400px:

For max-width == 100px:

How to change the size? I need a smaller container and slides should be 310x82.

I want to create the slideshow of pany labels that are of a certain size. I use the script camera.js to create the slideshow and I need to change the image size:

<link 
    rel='stylesheet' 
    id='camera-css'  
    href='/html/themes/classic/css/camera.css' 
    type='text/css' media='all'> 

<style>
    .fluid_container {
        margin: 0 auto;
        max-width: 1000px;
        width: 100%;
    }
</style>

<script>
    jQuery(function(){
        jQuery('#camera_wrap_3').camera({
            height: '50%',
            pagination: true,
            thumbnails: false,
            imagePath: '/html/themes/classic/images/'
        });
    });
</script>

<div class="fluid_container">
    <div 
        class="camera_wrap camera_emboss" 
        id="camera_wrap_3">
        <div 
            data-thumb="/thumbs/1.jpg" 
            data-src="/slides/1.jpg" 
            data-time="1500" 
            data-trasPeriod="4000" 
            data-link="some link here" 
            data-target="_blank">
                <div 
                    class="camera_caption fadeFromBottom">
                some text here
                </div>
        </div>
        <div 
            data-thumb="/thumbs/2.jpg" 
            data-src="/slides/2.jpg" 
            data-time="1500" 
            data-trasPeriod="4000" 
            data-link="some link here" 
            data-target="_blank">
                <div 
                    class="camera_caption fadeFromBottom">
                some text here
                </div>
        </div>
    </div>
</div>

<div style="clear:both; display:block; height:100px"></div>

Here are some screenshots.

For max-width == 400px:

For max-width == 100px:

How to change the size? I need a smaller container and slides should be 310x82.

• javascript
• jquery
• css
• slideshow
• javascript-framework

3 Answers 3

You can adjust the height like so

        jQuery(function(){

            jQuery('#camera_wrap_3').camera({
                **height: '82px',**
                pagination: true,
                thumbnails: false,
                imagePath: '/html/themes/classic/images/'
            });

        });

However, I've been unable to affect any change on width.

jQuery(function () {
            jQuery('#camera_wrap_1').camera({
                alignment: 'center',
                maxHeight: $('.slider').outerHeight()+"px",
                thumbnails: true
            });
        });

You can calculate with outerHeight function.

in the version of camera that came with a theme my client bought, there was another tweak in addition to passing the height into the initializer i had to override this style as it had a min-height of 500px which made it impossible to make it the height I needed.

.camera_fakehover {
    min-height:50px;
}