|
Появление большой картинки при наведении на маленькое. Как?
|
|
|
2011-07-17Дата: Воскресенье, 17.07.2011, 08:41 | Сообщение # 1 |
Сержант
Группа: Пользователи
Статус: Offline
|
likbezz, Доброго здравия. А как сделать чтоб при наведении курсора либо рядом либо поверх маленькой появлялась большая фотография (картинка)?
| | |
|
|
2011-07-17Дата: Воскресенье, 17.07.2011, 20:32 | Сообщение # 2 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Alex86, Quote (Alex86) likbezz, Доброго здравия.
Ага, пасибочки ) Стараюсь )
Quote (Alex86) А как сделать чтоб при наведении курсора либо рядом либо поверх маленькой появлялась большая фотография (картинка)?
... Кроссбраузерно, только стилями ... сложно будет решить, во всяком случае “красиво”)
...
Скриптом ...
Типа - ссылке, position:relative, в неё закладцвается (скриптом или кодом) большая картинка с position:absolute и display:none. При наведении на ссылку (скриптом или стилями) задаётся скрытой картинке display:block.
Принцип примерно такой ...
Вариантов много, по сложности и способу исполнения.
Например, при помощи JQ плагина «Zoomi» (Ссылка на оф. сайт)
☑ Пример ....
...
Но, я бы написал свой, который учитывает размеры картинки и вписывает её в текущие размеры окна просмотра ...
...
Вот ещё вариант ....
☑ Пример №2 .... ....
....
Или вот, простенький скриптик ...
☑ Пример №3 ...
...
Смотрим исходники!!!
| | |
|
|
2011-07-17Дата: Воскресенье, 17.07.2011, 22:06 | Сообщение # 3 |
Сержант
Группа: Пользователи
Статус: Offline
|
Всё просто замечательно.
Вот что получаеться: То что я переделал
Но вот если эти картики находяться внутри текста?
Примерно по такой схеме:
<<много текста>>
<<катринка>>
<<много текста>>
Сообщение отредактировал Alex86 - Воскресенье, 17.07.2011, 22:10 | | |
|
|
2011-07-18Дата: Понедельник, 18.07.2011, 01:13 | Сообщение # 4 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Alex86, Quote (Alex86) Но вот если эти картики находяться внутри текста?
Примерно по такой схеме:
<<много текста>>
<<катринка>>
<<много текста>>
... И что? ... Запакуйте картинки в блок ... По любому - картинка будет позиционироваться относительно левого верхнего угла родительской ссылки с position:relative. Как её разместите, так и будет.
...
| | |
|
|
2011-07-18Дата: Понедельник, 18.07.2011, 07:31 | Сообщение # 5 |
Сержант
Группа: Пользователи
Статус: Offline
|
likbezz, Большое Вам спасибо. Теперь всё понятно, полезная информация.
Удачи.
| | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 13:52 | Сообщение # 6 |
Сержант
Группа: Проверенные
Статус: Offline
|
Quote (likbezz) Нет.
Только скриптом. (примера нет, нужно писать)
Плохо 
...
Наткнулся на тему на форуме, захотелось так сделать на странице "Архив материалов" (ну то бишь на главной). Так вот скачал скрипт запихнул на фтп сайта и в <head> страницы прописал:
Code <script type="text/javascript" src="http://applenews.3dn.ru/theme/js/zoomi.js"></script>
А как это прописать к картинке ($IMAGE$) ? (та которая выводится слева, каждой темы) и вообще возможно ли это? И нужно что нибудь еще прописывать куда - либо? Или только скрипт запихнуть и к картинке привязать?
| | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 14:58 | Сообщение # 7 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
A11igatoR, Quote (A11igatoR) как это прописать к картинке ($IMAGE$) ? (та которая выводится слева, каждой темы) и вообще возможно ли это?
Возможно.
Code <script type="text/javascript">
$(document).ready(function(){
/*Start DocumentReady*/
$('span.zoomBox img').zoom1().mouseover(function(){$(this).zoom2().fadeIn();}).zoom2().mouseout(function(){$(this).fadeOut();});
/*End DocumentReady*/
});
</script>
Где:
span.zoomBox - блок в котором картинка.
Например:
Code <span class="zoomBox">$IMAGE$</span>
...
☑ Смотрим пример (обновлённый вариант) ....
...
| | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 20:09 | Сообщение # 8 |
Сержант
Группа: Проверенные
Статус: Offline
|
Что то не получается...
Значит:
1) Закинул два скрипта на фтп и обращаюсь к ним вот таким образом (на странице - "Архив материалов", т.е главной странице):
Code <script type="text/javascript" src="http://applenews.3dn.ru/theme/js/zoomi.js"></script>
<script type="text/javascript" src="http://applenews.3dn.ru/theme/js/minizoomi.js"></script>
2)Картинка у меня в блоке span.pbpostimg (на странице - "Вид материалов").
3)Меняю в скрипте (minizoomi.js) span.zoomBox на span.pbpostimg.
4)В новости прописываю так:
Code <span class="pbpostimg">$IMAGE$</span>
А что то не получается желаемый результат, что не так делаю?
Сообщение отредактировал A11igatoR - Суббота, 15.10.2011, 20:09 | | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 21:19 | Сообщение # 9 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
A11igatoR, Quote (A11igatoR) Что то не получается...
Скрипты ниже по коду помести, например после $BODY$ ... ещё лучше было бы - в глобальный блок, типа «$GLOBAL_FOOTER$» ...
Но у тебя их нет.
...
| | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 22:24 | Сообщение # 10 |
Сержант
Группа: Проверенные
Статус: Offline
|
Quote (likbezz) Скрипты ниже по коду помести, например после $BODY$
ничего не получилось... что еще может быть не так?
| | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 22:48 | Сообщение # 11 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
A11igatoR, Quote (A11igatoR) ничего не получилось... что еще может быть не так?
Что именно не понятно во фразе:
Quote (likbezz) Скрипты ниже по коду помести, например после $BODY$ ...
...
И ещё, в файле minizoomi.js должен быть только код скрипта, никаких HTML включений типа:
...
Откуда берутся такие знания? ... кто научил? ... блин, ума не приложу ...
...
Ага ....
И у тебя:
Code <div class="pbpostimg"> <a href="http://applenews.3dn.ru/news/iphone_4s_izbavitsja_ot_mertvoj_khvatki/2011-10-09-143" alt="iPhone 4s избавится от “мертвой хватки”" title="iPhone 4s избавится от “мертвой хватки”"><img class="postimg1" src="http://applenews.3dn.ru/_nw/1/s02720247.jpg" alt="" height="100" width="177"></a> </div> <span class="pbposttitle"><a href="http://applenews.3dn.ru/news/iphone_4s_izbavitsja_ot_mertvoj_khvatki/2011-10-09-143"> <img src="http://applenews.3dn.ru/appleheader.gif" alt="" weight="20px" border="0" height="20px">iPhone 4s избавится от “мертвой хватки”</a></span>
... И в нем ни намёка на «span.pbpostimg» ...
Вижу «div.pbpostimg» ... и «span.pbposttitle»
Так что поправь, либо на
Code $('div.pbpostimg img')....
либо на:
Code $('span.pbposttitle img') ...
... Это в файле minizoomi.js ...
| | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 23:02 | Сообщение # 12 |
Сержант
Группа: Проверенные
Статус: Offline
|
Quote (likbezz) Что именно не понятно во фразе: 
Прописал скрипты после <$BODY$> и убрал из скрипта лишнее... Результат тот же.
| | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 23:03 | Сообщение # 13 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
A11igatoR, Quote (A11igatoR) Результат тот же.
Quote (likbezz) ... И в нем ни намёка на «span.pbpostimg» ...
Вижу «div.pbpostimg» ... и «span.pbposttitle»
Так что поправь, либо на ...
А вот это читал?
... )
Добавлено (15-Окт-2011, 23:11:41)
---------------------------------------------
Слава Богу ... Разобрались ... )
...
| | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 23:09 | Сообщение # 14 |
Сержант
Группа: Проверенные
Статус: Offline
|
НЕ поверишь, но это я тоже менял уже) Сейчас исправил на div - результат тот же) Может, что то не туда писать нужно?
Сообщение отредактировал A11igatoR - Суббота, 15.10.2011, 23:13 | | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 23:13 | Сообщение # 15 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Quote (A11igatoR) Сейчас исправил на div - результат тот же)
Ты издеваешься? ....
applenews.3dn.ru/news/
...
| | |
|
