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
.
3 Answers
Reset to default 2You 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;
}