相机幻灯片 v1.3.3 - 调整图片大小

Posted 2023-02-22

【中文标题】相机幻灯片 v1.3.3 - 调整图片大小

【英文标题】：Camera slideshow v1.3.3 - adjust the image size

【发布时间】：2012-11-21 03:41:21

【问题描述】：

我想创建一定大小的公司标签幻灯片。我使用脚本camera.js 创建幻灯片，我需要更改图像大小：

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

这里有一些截图。

对于max-width == 400px：

对于max-width == 100px：

如何改变尺寸？我需要一个较小的容器，幻灯片应该是310x82。

【参考方案1】：

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

您可以使用 outerHeight 函数计算。

【参考方案2】：

在我的客户购买的带有主题的相机版本中，除了将高度传递给初始化程序之外，还有另一个调整，我必须覆盖这种样式，因为它的最小高度为 500 像素，这使得无法让它达到我需要的高度。

.camera_fakehover 
    min-height:50px;

【参考方案3】：

你可以像这样调整高度

        jQuery(function()

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

        );

但是，我无法对宽度进行任何更改。