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

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

вопрос

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

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

Подскажите, если знаете решение, как можно картинку в html, например:

<img width="100" height="100" src="адрес картинки" />

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

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

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

Ответил: nowheremany

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

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

7 комментариев

Юзер

nalex - 2014-10-1913 февраля 2012 16:17 - #3739

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

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

Эксперт

1925

nowheremany - 2014-10-1914 февраля 2012 09:35 - #3754

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

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

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

Юзер

LE 0N0T0LE =) - 2014-10-1913 февраля 2012 20:28 - #3744

Ну, собственно, попробуй

<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 - 2014-10-1914 февраля 2012 10:48 - #3756

Цитата: nowheremany

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

Эксперт

1925

nowheremany - 2014-10-1914 февраля 2012 12:23 - #3759

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

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

Юзер

nalex - 2014-10-1914 февраля 2012 10:56 - #3757

Цитата: LE 0N0T0LE =)

Ну, собственно, попробуй

и прикрути Picbox

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

Юзер

nalex - 2014-10-1915 февраля 2012 01:18 - #3770

Вопрос решен! 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 и загрузки на сайт через админку.
Достаточно добавить только в код расположение каждой картинки!