Не нравятся результаты поиска? Попробуйте другой поиск!

Без [thumb] увеличить картинки на сайте


     12.02.2012    Общие вопросы, Общие вопросы по вёрстке, Шаблоны (TPL), jQuery    5549

вопрос
Загружаю, по разным причинам, картинки для сайта в отдельные папки НЕ через админку.

Не хочу создавать уменьшенные картинки, чтобы они потом увеличивались через [thumb] - также есть причины.

Подскажите, если знаете решение, как можно картинку в html, например:
<img width="100" height="100" src="адрес картинки" />

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

На сайте в данный момент картинки в своем естественном виде или уменьшенные по примеру кода выше (в заданных разных размерах).

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

Ответил: nowheremany


Что проще - посмотреть исходный код, как делает дле и сделать также?

<a href="адрес картинки" onclick="return hs.expand(this)"><img src="адрес картинки" width="100"></a>

Комментарии пользователей (7)

nalex
19 | 8

nalex - 13 февраля 2012 16:17 - Юзер

Благодарю за ответ, но можно сделать еще проще:
a href="адрес картинки" и добавить img src="адрес картинки" width="100" height="100"

Итог будет тот же - картинка выводится в натуральный размер, но в новом окне...
А хотелось бы в том же окне, на фоне страницы сайта чтобы увеличивалась картинка.

nowheremany
192

1659 | 1292

nowheremany - 14 февраля 2012 09:35 - Эксперт

Не надо делать проще. сделайте как описано и все

(если не срабатывает всплытие картинки как обычно, тогда отсутствует подключение engine/classes/highslide/highslide.js)

Благодарность принимаю тут Связь

LE 0N0T0LE =)
3 | 3

LE 0N0T0LE =) - 13 февраля 2012 20:28 - Юзер

Ну, собственно, попробуй
<a href="адрес картинки"><img src="alhtc картинки" /></a>

и прикрути Picbox (http://bunnyfire.co.uk)
с кодом автозагрузки
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    jQuery(function($) {
        $("a[href]").filter(function() {
            return /\.(jpg|png|gif)$/i.test(this.href);
        }).picbox({}, null, function(el) {
            return (this == el) || (this.parentNode && (this.parentNode == el.parentNode));
        });
    });
}

Так он будет отлавливать все ссылки, ведущие на картинки джепег, гиф, пнг.
Если не надо ловить все ссылки, то надо поднастроить его стандартный блок загрузки под себя. Он на jQuery, не особо сложно.

Хотя, это по сути то же самое, что предложил nowheremany. Не сразу понял, ссори))

nalex
19 | 8

nalex - 14 февраля 2012 10:48 - Юзер

Цитата: nowheremany
Не надо делать проще. сделайте как описано и все

(если не срабатывает всплытие картинки как обычно, тогда отсутствует подключение engine/classes/highslide/highslide.js)


Все подключено, на картинке при наведении появляется лупа с плюсом .... и картинка все также открывается в новом окне... Я потому так и написал, что в моем случае суть одна.
Проверяю на Денвере.
Думаю, что на сервере другого не будет.

nowheremany
192

1659 | 1292

nowheremany - 14 февраля 2012 12:23 - Эксперт

Консоль ошибок для чего? ФиреБаг там и прочее... Стандартно работает тот вариант что предложил, остальное надо смотреть воочию

Благодарность принимаю тут Связь

nalex
19 | 8

nalex - 14 февраля 2012 10:56 - Юзер

Цитата: LE 0N0T0LE =)
Ну, собственно, попробуй

и прикрути Picbox


Я чего только не пытался прикручивать и на локалке, и на сервере... Суть одна.
У меня уже десятка два всяких скриптов...
Скорее всего, что я что-то не учел, не сделал, а знаний не хватает.

nalex
19 | 8

nalex - 15 февраля 2012 01:18 - Юзер

Вопрос решен! wink

Сделал так:

Подключил скрипт в head:
script type="text/javascript" src="/engine/classes/highslide/highslide.js" /script
________
$(document).ready(function() {

$('img#myid').attr('onclick', 'return hs.expand(this)');

});


Картинку на страницу вставил так:
a href="адрес картинки" onclick="return hs.expand(this)" img src="адрес картинки" alt="название" width="100" height="100" /a


И все заработало без предварительного уменьшения картинки, без thumb и загрузки на сайт через админку.
Достаточно добавить только в код расположение каждой картинки!

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы