Настройка высоты Div на основе размера изображения

Итак, я заполняю три массива javascript в своем php-коде, чтобы сохранить размеры фотографии и ее источник. Затем я показываю только 325x300 эскиз изображения на моей странице, предполагая, что размеры не равны 325x300 с использованием php.Настройка высоты Div на основе размера изображения

Когда пользователь нажимает на один из миниатюр, я хотел бы, чтобы он открыл полноразмерное изображение в div #largeImage и отобразил его. Пока это работает.

Однако я столкнулся с трудностями в том, чтобы погружение изменилось до размеров изображения. Я использую php для получения размеров (если в jQuery нет лучшего способа сделать это). На данный момент div не изменяет размер, и я не уверен, куда идти отсюда. Я включил jquery и вывод html из PHP-кода.

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

Вот CSS, который я использую в данный момент. Div не изменяет размер, если я удалю ограничения размера в блоке jQuery.

{margin: 0; padding: 0;} 
@import url(http://fonts.googleapis.com/css?family=Finger+Paint); 
@import url(http://fonts.googleapis.com/css?family=Russo+One); 
@font-face 
{ 
    font-family: "DayPosterBlack"; 
    src: url('dayposterblack.tff'); 

} 
body{ 
    background-color: #303030; 
    background:#222 url(dark_wall.png); 
} 
#container { 
    width: 1000px; 
    height: 425px; 
    overflow: hidden; 
    margin: 25px auto; 
    background:#303030; 
} 
.photobanner { 
    height: 233px; 
    width: 3550px; 
    margin-bottom: 80px; 
} 
.first { 
    -webkit-animation: bannermove 30s linear infinite; 
    -moz-animation: bannermove 30s linear infinite; 
    -o-animation: bannermove 30s liner infinite; 
    animation: bannermove 30s linear infinite; 
} 
.photobanner img{ 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease ; 
    transition: all 0.5s ease; 
} 

.photobanner img:hover { 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    transform: scale(1.1); 
    cursor: pointer; 

    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2); 
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2); 
} 
@keyframes "bannermove" { 
    0%{ 
     margin-left: 0px; 
    } 
    100%{ 
     margin-left: -2125px; 
    } 
} 

@-moz-keyframes "bannermove" { 
    0%{ 
     margin-left: 0px; 
    } 
    100%{ 
     margin-left: -2125px; 
    } 
} 

@-webkit-keyframes "bannermove" { 
    0%{ 
     margin-left: 0px; 
    } 
    100%{ 
     margin-left: -2125px; 
    } 
} 

@-ms-keyframes "bannermove" { 
    0%{ 
     margin-left: 0px; 
    } 
    100%{ 
     margin-left: -2125px; 
    } 
} 

@-o-keyframes "bannermove" { 
    0%{ 
     margin-left: 0px; 
    } 
    100%{ 
     margin-left: -2125px; 
    } 
} 
#nav { 
font-family: 'DayPosterBlack', normal; 
position: relative; 
background-color: black ; 
width: 1000px; 
height:25px; 
font-size:12px; 
color:#ffff33; 
margin: 0px auto; 
z-index: 10; 

} 

#nav ul { 
list-style-type: none; 
padding:0px; 

} 

#nav ul li { 
float: left; 
position: relative; 
} 

#nav ul li a { 
text-align: center; 
padding:55px; 
padding-top: 5px; 
padding-bottom: 5px; 
display:block; 
text-decoration:none; 
color:#ffff33; 
} 

#nav ul li ul { 
display: none 
} 

#nav ul li:hover ul { 
display: block; 
position: absolute; 
} 

#nav ul li:hover ul li a { 
display:block; 
background:#000000; 
color:#ffff33; 
width: 75px; 
text-align: center; 
border-bottom: 1px solid #f2f2f2; 
border-right: none; 
} 

#nav ul li:hover ul li a:hover { 
background:#303030; 
color:#fff; 
border-bottom: 1px solid #ffff33 
} 
#controlpanel { 
font-family: 'russo one', normal; 
position: relative; 
background: url('carbon_black.jpg'); 
width: 1000px; 
height:25px; 
font-size:12px; 
color:#ffff33; 
margin: 0px auto; 
z-index: 0; 

} 

#controlpanel ul { 
list-style-type: none; 
padding:0px; 

} 

#controlpanel ul li { 
float: left; 
position: relative; 
} 

#controlpanel ul li a { 
text-align: center; 
padding:25px; 
padding-top: 5px; 
padding-bottom: 5px; 
display:block; 
text-decoration:none; 
color:#ffff33; 
} 

#controlpanel ul li ul { 
display: none 
} 

#controlpanel ul li:hover ul { 
display: block; 
position: absolute; 
} 

#controlpanel ul li:hover ul li a { 
display:block; 
background:#000000; 
color:#ffff33; 
width: 75px; 
text-align: center; 
border-bottom: 1px solid #f2f2f2; 
border-right: none; 
} 

#controlpanel ul li:hover ul li a:hover { 
background:#303030; 
color:#fff; 
border-bottom: 1px solid #ffff33 
} 
.album_container{ 
margin: 0px auto; 
position: relative; 
width: 1000px; 
} 
.album_box{ 
position: relative; 
margin: 0px auto; 
float: left; 
text-align: center; 
color: #ffff33; 
width:325px; 
height: 300px; 
padding-right: 8px; 
padding-bottom: 20px; 
} 
.album_box a{ 
font-family: 'russo one', sans serif ; 
color: #ffff33; 
text-align: center; 
text-decoration: none ; 

} 
.album_box img{ 
position: relative; 
margin: 0px; 
display: block; 
} 
.album_box p{ 
font-family: 'russo one', sans serif; 
color: #ffff33; 
text-align: center; 
position: absolute; 
text-decoration: none; 
margin: 0px; 
z-index: 200px; 
display: block; 
background-color: #101010; 
top: 280px; 
} 
.spacer { 

position: relative; 

width: 12px; 
} 
#gallery{ 
margin: 10px auto; 
width: 1000px; 



} 
#thumpanel{ 
float: left; 
width: 1000px; 
border: 3px outset #101010; 
background: url('dark_wall copydarker.png'); 

} 


#thumbpanel img{ 
position: relative; 
float: left; 
padding: 4px; 
} 

#imageBackground{ 
position: fixed; 
background: #303030; 
opacity: 0.6 ; 
width: 1500px; 
height: 2000px; 
top: 50%; 
left: 50%; 
margin: auto; 
z-index: 20 ; 
-webkit-transform: translate(-50%, -50%); 
-moz-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%); 

} 
#largeImage{ 
position: fixed; 

background: #202020 ; 
top: 50%; 
left: 50%; 
margin: auto; 
z-index: 25 ; 
-webkit-transform: translate(-50%, -50%); 
-moz-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%); 

} 
#largeImage img{ 
position: absolute; 
top: 0 ; 
left: 0; 
right: 0; 
bottom: 0; 
margin: auto ; 

} 
.return{ 
position: relative; 
margin: 10px auto; 
} 
.back{ 
float: left; 
position: relative; 
margin-top: 240px; 
margin-left: 20px; 
background: #101010; 
text-align: center; 
color: #ffff33; 
border: 2px outset #000000; 
text-decoration: none; 
width: 35px; 
height: 35px; 
vertical-align: middle; 



} 
.next{ 
float: right; 
position: relative; 
margin-top: 240px; 
margin-right: -15px; 
background: #101010; 
text-align: center; 
color: #ffff33; 
border: 2px outset #000000; 
text-decoration: none; 
width: 35px; 
height: 35px; 
vertical-align: middle; 
} 
.close{ 
float: right; 
position: relative; 
margin-top: 0px; 
margin-right: 0px; 
background: #101010 ; 
text-align: center; 
color: #ffff33; 
border: 2px outset #000000; 
text-decoration: none; 
width: 35px; 
height: 35px; 
} 
#largeImage input [type='button']:hover{ 
background: #303030 ; 

} 
.data_container{ 
position: relative; 
width: 1000px; 
height: 1000px; 
margin: 20px auto; 

} 
.data_entry{ 
position: relative ; 
width: 1000px; 
margin: 5px auto ; 
} 

.data_entry table{ 

margin: 0px auto; 
font-size: 16px; 
color: #ffff33 ; 
} 
.data_entry form{ 
background: url('dark_wall copydarker.png') ; 
border: 3px outset #000000; 
margin: 0px auto; 
font-size: 16px; 
color: #ffff33 ; 

} 
.success{ 
position: relative; 
width: 1000px; 
background: #ffff33 ; 
margin: 5px auto ; 
font-size: 20px; 
} 
.error{ 
position: relative; 
width: 1000px; 
background: #ff0000; 
margin: 5px auto; 
font-size: 20px; 
} 
.button{ 
margin: 5px auto ; 
width: 180px; 
display: block; 
background: #101010; 
text-align: center; 
color: #ffff33; 
border: 2px outset #000000; 
text-decoration: none; 
vertical-align: middle; 
} 
.button a:hover{ 
background: #303030 ; 
} 
.bottom_button{ 
position: relative; 
bottom: 0 ; 
margin: 5px auto ; 
width: 180px; 
display: block; 
background: #101010; 
text-align: center; 
color: #ffff33; 
border: 2px outset #000000; 
text-decoration: none; 
vertical-align: middle; 
float: bottom ; 
} 
.bottom_button a:hover{ 
background: #303030 ; 
} 
.confirm{ 
margin: 5px auto ; 
width: 180px; 
display: block; 
background: #101010; 
text-align: center; 
color: #ffff33; 
border: 2px outset #000000; 
text-decoration: none; 
vertical-align: middle; 
} 
.confirm a:hover{ 
background: #303030; 
} 
.uploaded_photos{ 
position: relative; 
width: 1000px; 
height: 500px; 
margin: 0px auto ; 
background: url('dark_wall copydarker.png') ; 
color: #ffff33 ; 
text-align: center; 
border: 2px outset #000000; 
} 
.uploaded_photos img{ 
width: 40% ; 
height: 40%; 
float: left; 
margin: 10px; 

} 
.pageHeader{ 
text-align: center ; 
color: #ffff33 ; 
font-size: 22px; 
font-weight: bold ; 
background-color: #000000; 
font-family: 'russo one', sans serif; 
width: 1000px; 
height: 25px; 
position: relative; 
margin: 5px auto; 
}

источник

2015-02-14 NoobWebDev

Вы получаете какие-либо ошибки? – void

Это не путь. Не используйте оригинальные изображения для отображения миниатюры. Создайте миниатюру для каждого изображения до раз и навсегда. –

right Я использую imagecopyresampled для создания меньшего изображения. тем не менее, мои клиенты хотят видеть полноразмерное изображение в указанном порядке. – NoobWebDev

Удалить строки:

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

и пусть #largeImage автоматически изменять размер, чтобы подогнать изображение. Вы можете управлять максимальными размерами #largeImage с помощью CSS (max-width, max-height).

источник

2015-02-14 18:46:45 bobdye

Я пробовал, и это не сработало. Не уверен, почему, но весы div с двумя кнопками, которые должны идти по обеим сторонам изображения, но не будут масштабироваться с изображением. Довольно смутно в этот момент. – NoobWebDev

понял, что мне нужно установить высоту, ширину в auto в css. это фиксировало проблему. Спасибо. – NoobWebDev

Рад, что это сработало. – bobdye

Настройка высоты Div на основе размера изображения

ответ

Смежные вопросы