Javascript 根据图片大小设置Div高度_Javascript_Php_Jquery_Html_Css

Javascript 根据图片大小设置Div高度

javascript php jquery html css

Javascript 根据图片大小设置Div高度,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,因此，我在php代码中填充了三个javascript数组，以保存照片及其源代码的维度。然后，我只在页面上显示图像的325x300缩略图，假设使用php时尺寸不等于325x300 当用户单击其中一个缩略图时，我希望它在LargeImagediv中打开完整大小的图像，并将其取消隐藏。到目前为止，这是可行的然而，我在使俯冲调整到图像尺寸时遇到了麻烦。除非在jQuery中有更好的方法，否则我使用php来获取维度。在这一点上，div没有调整大小，我也不知道从这里到哪里去。我已经包含了jquery和php

因此，我在php代码中填充了三个javascript数组，以保存照片及其源代码的维度。然后，我只在页面上显示图像的325x300缩略图，假设使用php时尺寸不等于325x300

当用户单击其中一个缩略图时，我希望它在LargeImagediv中打开完整大小的图像，并将其取消隐藏。到目前为止，这是可行的

然而，我在使俯冲调整到图像尺寸时遇到了麻烦。除非在jQuery中有更好的方法，否则我使用php来获取维度。在这一点上，div没有调整大小，我也不知道从这里到哪里去。我已经包含了jquery和php代码的输出html

<html>
<head>
    <style>
        @import "album_style.css";
    </style>

    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function() {
            var active_index;
            var source_image;
            var index;
            var style;

            $('#largeImage').hide();
            $('#imageBackground').hide();

            $('#gallery img').click(function() {
                index = parseInt( $(this).attr('value'));
                $('#largImage').height(parseInt(picture_y[index]) + 20);
                $('#largImage').width(parseInt(picture_x[index]) + 50);
                $('#largeImage img').attr('src', picture_list[index]);
                $('#largeImage').show() ;
                $('#imageBackground').show() ;
                active_index = index ;
            });

            $('.next').click(function( event ){
                active_index = active_index + 1;
                max_index = array_size - 1;
                if(active_index == array_size)
                {
                    active_index = 0 ;
                }
                source_image = $('#largeImage img').attr('src');
                var newSrc = $('#largeImage img').attr('src')
                    .replace(source_image, picture_list[ active_index]);
                $('#largeImage img').attr('src', newSrc);
            });

            $('.back').click(function(event) {
                active_index = active_index - 1;

                if( active_index < 0 )
                {
                    active_index = array_size - 1;
                }
                source_image = $('#largeImage img').attr('src') ;
                var newSrc = $('#largeImage img').attr('src')
                        .replace(source_image, picture_list[active_index]);
                $('#largeImage img').attr('src', newSrc);
            }) ;

            $('.close').click(function() {
                $('#largeImage').hide();
                $('#imageBackground').hide();
            });
        });
    </script>
</head>

<body>

<div id="container">
    <img src="websitebanner.jpg">
</div>

<div id="nav">
    <ul>
        <li>
            <a href="index.php">Home</a>
        </li>
        <li>
            <a href="news.php">News</a>
        </li>
        <li>
            <a href="events.php">Events</a>
        </li>
        <li>
            <a href="#">The Team</a>
            <ul>
                <li><a href="roster.php">Roster</a></li>
                <li><a href="albums.php">Albums</a></li>
            </ul>
        </li>
        <li>
            <a href="sponsors.php">Sponsors</a>
        </li>
        <li>
            <a href="social.php">Contact Us</a>
        </li>
    </ul>
</div>

<div class='pageHeader'>Test1</div>

<script type='text/javascript'>
    var array_size = 3;
</script>

<script type='text/javascript'>
    var picture_list = new Array(array_size);
    var picture_x = new Array(array_size);
    var picture_y = new Array(array_size);
</script>

<div id='imageBackground'></div>

<div id='largeImage'>
    <input type='button' class='close' value='X'>
    <input type='button' class='back' value='<<'>
    <img src='Test1/Image3.jpg'>
    <input type='button' class='next' value='>>'>
</div>

<div id='gallery'>
    <div id='thumbpanel'>
        <img value='0' src='Thumbnails/Thumb_Image6.jpg'>
        <script type='text/javascript'>
            picture_list[0] = 'Albums/Test1/Image6.jpg';
            picture_x[0] = 386;
            picture_y[0] = 233;
        </script>
        <img value='1' src='Thumbnails/Thumb_Ellie 012.jpg'>
        <script type='text/javascript'>
            picture_list[1] = 'Albums/Test1/Ellie 012.jpg';
            picture_x[1] = 3264;
            picture_y[1] = 2448;
        </script>
        <img value='2' src='Albums/Test1/concealedjesspermit.jpg'>
        <script type='text/javascript'>
            picture_list[2] = 'Albums/Test1/concealedjesspermit.jpg';
            picture_x[2] = 325;
            picture_y[2] = 300;
        </script>
        Page 1
    </div>
</div>

</body>
</html>

删除以下行：

$('#largImage').height(parseInt(picture_y[index]) + 20);
$('#largImage').width(parseInt(picture_x[index]) + 50);

并让largeImage自动调整大小以适应图像。您可以使用CSS max width、max height来控制大图像的最大尺寸。

有什么错误吗？这不是解决问题的方法。不要使用原始图像显示缩略图。在一次完成之前，为每个图像创建一个缩影。好的，我正在使用imagecopyresampled生成一个更小的图像。但是，我的客户希望能够以列出的方式查看完整尺寸的图像。我尝试了，但没有成功。不知道为什么，但div使用两个按钮进行缩放，这两个按钮本应位于图像的任意一侧，但不会随图像缩放。这一点相当混乱。我意识到我需要在css中将高度、宽度设置为自动。这解决了问题。非常感谢。

$('#largImage').height(parseInt(picture_y[index]) + 20);
$('#largImage').width(parseInt(picture_x[index]) + 50);