|
Появление большой картинки при наведении на маленькое. Как?
|
|
| [1] Alex86 [17.07.2011, 08:41] |
|
likbezz, Доброго здравия. А как сделать чтоб при наведении курсора либо рядом либо поверх маленькой появлялась большая фотография (картинка)? |
|
| [2] likbezz [17.07.2011, 20:32] |
Alex86, Quote (Alex86) likbezz, Доброго здравия.
Ага, пасибочки ) Стараюсь )
Quote (Alex86) А как сделать чтоб при наведении курсора либо рядом либо поверх маленькой появлялась большая фотография (картинка)?
... Кроссбраузерно, только стилями ... сложно будет решить, во всяком случае “красиво”)
...
Скриптом ...
Типа - ссылке, position:relative, в неё закладцвается (скриптом или кодом) большая картинка с position:absolute и display:none. При наведении на ссылку (скриптом или стилями) задаётся скрытой картинке display:block.
Принцип примерно такой ...
Вариантов много, по сложности и способу исполнения.
Например, при помощи JQ плагина «Zoomi» (Ссылка на оф. сайт)
☑ Пример ....
...
Но, я бы написал свой, который учитывает размеры картинки и вписывает её в текущие размеры окна просмотра ...
...
Вот ещё вариант ....
☑ Пример №2 .... ....
....
Или вот, простенький скриптик ...
☑ Пример №3 ...
...
Смотрим исходники!!! |
|
| [3] Alex86 [17.07.2011, 22:06] |
Всё просто замечательно.
Вот что получаеться: То что я переделал
Но вот если эти картики находяться внутри текста?
Примерно по такой схеме:
<<много текста>>
<<катринка>>
<<много текста>>
Сообщение отредактировал Alex86 - Воскресенье, 17.07.2011, 22:10 |
|
| [4] likbezz [18.07.2011, 01:13] |
Alex86, Quote (Alex86) Но вот если эти картики находяться внутри текста?
Примерно по такой схеме:
<<много текста>>
<<катринка>>
<<много текста>>
... И что? ... Запакуйте картинки в блок ... По любому - картинка будет позиционироваться относительно левого верхнего угла родительской ссылки с position:relative. Как её разместите, так и будет.
... |
|
| [5] Alex86 [18.07.2011, 07:31] |
likbezz, Большое Вам спасибо. Теперь всё понятно, полезная информация.
Удачи. |
|
| [6] A11igatoR [15.10.2011, 13:52] |
Quote (likbezz) Нет.
Только скриптом. (примера нет, нужно писать)
Плохо 
...
Наткнулся на тему на форуме, захотелось так сделать на странице "Архив материалов" (ну то бишь на главной). Так вот скачал скрипт запихнул на фтп сайта и в <head> страницы прописал:
Code <script type="text/javascript" src="http://applenews.3dn.ru/theme/js/zoomi.js"></script>
А как это прописать к картинке ($IMAGE$) ? (та которая выводится слева, каждой темы) и вообще возможно ли это? И нужно что нибудь еще прописывать куда - либо? Или только скрипт запихнуть и к картинке привязать? |
|
| [7] likbezz [15.10.2011, 14:58] |
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>
...
☑ Смотрим пример (обновлённый вариант) ....
... |
|
| [8] A11igatoR [15.10.2011, 20:09] |
Что то не получается...
Значит:
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 |
|
| [9] likbezz [15.10.2011, 21:19] |
A11igatoR, Quote (A11igatoR) Что то не получается...
Скрипты ниже по коду помести, например после $BODY$ ... ещё лучше было бы - в глобальный блок, типа «$GLOBAL_FOOTER$» ...
Но у тебя их нет.
... |
|
| [10] A11igatoR [15.10.2011, 22:24] |
Quote (likbezz) Скрипты ниже по коду помести, например после $BODY$
ничего не получилось... что еще может быть не так? |
|
| [11] likbezz [15.10.2011, 22:48] |
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 ...
|
|
| [12] A11igatoR [15.10.2011, 23:02] |
Quote (likbezz) Что именно не понятно во фразе: 
Прописал скрипты после <$BODY$> и убрал из скрипта лишнее... Результат тот же. |
|
| [13] likbezz [15.10.2011, 23:03] |
A11igatoR, Quote (A11igatoR) Результат тот же.
Quote (likbezz) ... И в нем ни намёка на «span.pbpostimg» ...
Вижу «div.pbpostimg» ... и «span.pbposttitle»
Так что поправь, либо на ...
А вот это читал?
... )
Добавлено (15-Окт-2011, 23:11:41)
---------------------------------------------
Слава Богу ... Разобрались ... )
... |
|
| [14] A11igatoR [15.10.2011, 23:09] |
НЕ поверишь, но это я тоже менял уже) Сейчас исправил на div - результат тот же) Может, что то не туда писать нужно?
Сообщение отредактировал A11igatoR - Суббота, 15.10.2011, 23:13 |
|
| [15] likbezz [15.10.2011, 23:13] |
Quote (A11igatoR) Сейчас исправил на div - результат тот же)
Ты издеваешься? ....
applenews.3dn.ru/news/
...
|
|
