Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Без [thumb] увеличить картинки на сайте

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


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

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

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

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

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

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

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

Ответил: nowheremany


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

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

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

nalex
Юзер

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

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

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

nowheremany
Эксперт

nowheremany - 14 февраля 2012 09:35 -

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

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

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

LE 0N0T0LE =)
Юзер

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
Юзер

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

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

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


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

nowheremany
Эксперт

nowheremany - 14 февраля 2012 12:23 -

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

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

nalex
Юзер

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

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

и прикрути Picbox


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

nalex
Юзер

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

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

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

наверх