Форум

qwerty14 · #1 (**permalink**) 08.12.2015, 14:37

Есть сайт http://salan-school.ru/ . В новостях есть фотографии, при клике они увеличиваются, горизонтальные отображаются хорошо а вертикальные не влазят. Как исправить? Пробовал так не получилось:

$(".im").load(function() {
    var height = $(this).height();
    var width = $(this).width();
	var im = $("#im");
	if (height > width) im.attr("height","600");
	else im.attr("width","1024");
});

laimas · #2 (**permalink**) 08.12.2015, 14:53

if (height > width) ~~im.attr~~("height","600");

if (height > width) im.css({height:600, width:'auto'});

qwerty14 · #3 (**permalink**) 08.12.2015, 14:54

так тоже не работает

laimas · #4 (**permalink**) 08.12.2015, 15:02

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    $('img').click(function() {
        $(this).css({height:250, width:"auto"});
    });
});
</script>     
</head> 
<body style="width: 400; height: ;">
<img src="http://cs306502.userapi.com/v306502055/5061/_7hhTxZUzkY.jpg" />
</body> 
</html>

Работает?

laimas · #5 (**permalink**) 08.12.2015, 15:06

У вас

$(".im").load(function()

а изменение высоты для

var im = $("#im");

кто из них прав?

qwerty14 · #6 (**permalink**) 08.12.2015, 15:26

класс im у всех картинок которые надо увеличить, когда нажимаешь на одну из этих картинок путь к этой картинки подставляется в блок с id im

<table id="FixedBlack" style="position: fixed; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.50); display: none; opacity: 0;">
					<tr>
						<td style="text-align: center;">
							<img src="images/close.png" alt="" class="close">
							<img src="" id="im" style="position: relative; width: 1024px; background: #000; box-shadow: 0 0 10px white; border: 5px solid #fff; border-radius: 6px;" />
						</td>
					</tr>
				</table>

$(document).on("click", ".im", function () {
        if ($(this).attr("src") != "") {
            $("#im").attr("src", $(this).attr("src"));
            $("#FixedBlack").show().fadeTo(200, 1);
            $("#im").show().fadeTo(0.5, 1);
        }
    });

    $(document).on("click", "#FixedBlack", function () {
        $("#im").hide();
        $("#FixedBlack").stop(true).fadeTo(200, 0, function () {
            $("#FixedBlack").hide();
        });
    });

рони · #7 (**permalink**) 08.12.2015, 17:01

qwerty14,
попробуйте так ... замените ваш код 1-7 на этот

$(document).on("click", ".im", function() {
     if (this.src) {
         $("<img/>").load(function() {
             var l = $(window).height() - 40;

             var w = (this.width / this.height) * l;
             if (w > $(window).width()) {
                 l = $(window).width() - 60;
                 l = {
                     width: l + 'px',
                     height: 'auto'
                 }
             } else {
                 l = {
                     height: l + 'px',
                     width: 'auto'
                 };
             }

             $("#im").css(l).attr({
                 "src": this.src
             });
             $("#FixedBlack").show().fadeTo(200, 1);
             $("#im").show().fadeTo(0.5, 1);
         }).attr({
             "src": this.src
         });


     }
 });

qwerty14 · #8 (**permalink**) 08.12.2015, 21:06

Спасибо все работает!!)

Форум

Справочник

Discord чат

Курсы javascript