Изменение размера изображения и предложение показа оригинальной опции с использованием css / html / php / jquery - PullRequest
Новая
       27

Изменение размера изображения и предложение показа оригинальной опции с использованием css / html / php / jquery

0 голосов
/ 06 августа 2011

В шаблоне моего сайта я хочу разместить код изображения, который изменяет размеры изображений с шириной более 910 пикселей до 910 пикселей, но оставляет их с шириной менее 910 пикселей.Если размер изображения изменяется, он должен предложить Показать исходное изображение .

Я хотел бы реализовать что-то вроде этого http://www.mangareader.net/94-8-3/bleach/chapter-1.html

Это код, который у меня такдалеко:

HTML: 

<img src="http://localhost/manga2anime/upload/Bleach/1/03.png" class="resize">

CSS: 

.resize {
    max-width: 910px;
    max-height : auto;
}

1 Ответ

0 голосов
/ 06 августа 2011

Проще всего было бы, если бы вы также сохранили ширину IMG в вашей базе данных.Если это так, подойдет что-то вроде этого: 

<?php
   // Connect to DB etc.

   $result = mysql_query("SELECT 'img_path', 'width' FROM table");

   if(mysql_row_count($result) != 0){
       while($row = mysql_fetch_array($result)){
            $img = "<img src='" . $row['img_path'] . "'";
            if($row['width'] > 910){
                $img .= " class='resize'";
                // OR
                // $img .= " width='910'";
                echo "<a onclick='showOriginal()'>Show Original</a>";
            }
            $img .= " >";
            echo $img;
       }
   }else{
       echo "No images found.";
   }
?>

Если img уже загружен и ваш php не очень удобен, вы также можете настроить его с помощью jQuery: 

function adjustImage(){
   if($('img#needed_img').width() > 910){
       $(this).addClass('resize');
       // OR
       // $(this).attr('width', '910');
       $('#show_original_button').show();
   }
}

И просто вызывайте вышеуказанную функцию при загрузке документа (не в сочетании с функцией готовности jQuery).Я не знаю, как выглядит ваш HTML, так что трудно также придумать работающую функцию «показать оригинал» ... но я думаю, что что-то вроде лайтбокса или модального режима было бы наиболее полезно в вашем случае, чтобы показать оригинал img, для негоне буду менять свой шаблон и просто «сидеть на нем».

...