|
Появление большой картинки при наведении на маленькое. Как?
|
|
|
2011-10-18Дата: Вторник, 18.10.2011, 22:03 | Сообщение # 31 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
A11igatoR, Quote (A11igatoR) Картинка (рожа) заработала, а вторая картинка не работает почему то...
Потому что у тебя вот такой код:
Code <div class="pbpostimg " align="center"> <!--IMG1--><img alt="" style="margin:0;padding:0;border:0;" src="http://applenews.3dn.ru/_si/0/62262241.gif" align="" /><!--IMG1--> </div> <div class="pbpostimg " align="center"> <!--IMG2--><a href="http://applenews.3dn.ru/_si/0/30297504.jpg" target="_blank" title="Нажмите, для просмотра в полном размере..."> <img alt="" style="margin:0;padding:0;border:0;" src="http://applenews.3dn.ru/_si/0/s30297504.jpg" align="" /> </a><!--IMG2--> </div>
Видишь разницу?
Прямой потомок - children('img') - блока «pbpostimg», в первом случае - картинка, а во втором - ссылка - элемент «a» ...
Для такого кода нужно писать типа вот так:
Code $(document).ready(function(){
/*Start DocumentReady*/
$('.zoom').hover(function(){
$(this).find('img').eq(0).stop().animate({width:"auto",height:"400px"},400);
},function(){$(this).find('img').eq(0).stop().animate({width:"auto",height:"200px"},400);
});
/*End DocumentReady*/
});
- Ищем первую картинку ($.find('img').eq(0);) в блоке с классом «zoom» ...
☑ Пример ... (zoom_children_img_v3.html)
...
Quote (A11igatoR) и по прежнему на главной странице не работает.
- По данной причине ...
И, кстати, это НЕ “дополнительный скрипт” к скрипту «_http://applenews.3dn.ru/theme/js/zoomi.js» - это отдельный скрипт не имеющий отношения к zoomi.js ... поэтому подгружать «zoomi.js» не обязательно ...
...
| | |
|
|
2011-10-19Дата: Среда, 19.10.2011, 01:03 | Сообщение # 32 |
Сержант
Группа: Проверенные
Статус: Offline
|
Получилось, но только не так как хотелось) Картинки увеличиваются, НО после того, как указатель мыши отводишь от картинки она возвращается опять в уменьшенное состояние, НО с другим размером! (чуть больше первоначального).
Да и еще увеличиваются как-то вниз в "узкой" ширине.
А задача поставлена так, что бы картинка увеличивалась в заданном размере (300 * 400 px).
И что бы эффект(выводилась картинка) был, как вот в этом (первоначальном) скрипте:
Code $(document).ready(function(){
/*Start DocumentReady*/
$('div.pbpostimg img').zoom1().mouseover(function(){$(this).zoom2().fadeIn();}).zoom2().mouseout(function(){$(this).fadeOut();});
/*End DocumentReady*/
});
Сообщение отредактировал A11igatoR - Среда, 19.10.2011, 01:08 | | |
|
|
2011-10-19Дата: Среда, 19.10.2011, 01:54 | Сообщение # 33 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
A11igatoR, Quote (A11igatoR) Получилось, но только не так как хотелось) Картинки увеличиваются, НО после того, как указатель мыши отводишь от картинки она возвращается опять в уменьшенное состояние, НО с другим размером! (чуть больше первоначального).
)))
Да, неужели ... )
Размер увеличенной картинки, и уменьшенной - первоначальной - устанавливается в скрипте:
Quote (JS) $(document).ready(function(){
/*Start DocumentReady*/
$('.zoom').hover(function(){
$(this).find('img').eq(0).stop().animate({width:"auto",height:"400px"},400);
},function(){$(this).find('img').eq(0).stop().animate({width:"auto",height:"200px"},400);
});
/*End DocumentReady*/
});
- Соответственно, какой напишите, такой и будет.
... Можно лаврировать между шириной и высотой - то бишь, увеличивать не по высоте, а по ширине, например ...
Типа:
Code $(document).ready(function(){
/*Start DocumentReady*/
$('.zoom').hover(function(){
$(this).find('img').eq(0).stop().animate({height:"auto",width:"400px"},400);
},function(){$(this).find('img').eq(0).stop().animate({height:"auto",width:"200px"},400);
});
/*End DocumentReady*/
});
- при наведении ширина картинки становится 400px, а высота - auto - для соблюдения пропорций, и при уходе мышки с картинки, высота так и остаётся в значении auto, а ширина уменьшается до 200px ...
Цифры можно подставить свои, любые, как на ширину, так и на высоты, и на любые другие параметры, что не указаны в данном скрипте ....
Например:
Code $(document).ready(function(){
/*Start DocumentReady*/
$('.zoom').hover(function(){
$(this).find('img').eq(0).stop().animate({height:"auto",width:"400px",border:"1px solid #666"},400);
},function(){$(this).find('img').eq(0).stop().animate({height:"auto",width:"200px",border:"0px"},400);
});
/*End DocumentReady*/
});
Где:
При наведении картинка увеличивается и (!!) у неё появляется темно-серый бордер шириной в 1px ... при уходе - картинка уменьшается, и пропадает бордер - становится в 0px.
... И так далее и т.п. ...
...
Quote (A11igatoR) Да и еще увеличиваются как-то вниз в "узкой" ширине.
Так написан скрипт ...
Перепишите под себя.
Quote (A11igatoR) А задача поставлена так, что бы картинка увеличивалась в заданном размере (300 * 400 px).
Про размеры читай выше - проставь такие, какие нужны.
...
Quote (A11igatoR) И что бы эффект(выводилась картинка) был, как вот в этом (первоначальном) скрипте:
И это тоже можно поменять ... )
Если для вас это сложно, советую остановиться на первоначальном варианте, со скриптом «zoomi» - про размер для него я уже писал.
...
| | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 00:27 | Сообщение # 34 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
likbezz, здравствуйте! С прошедшими праздниками!
Помогите, очень нужно. Вторую неделю бьюсь над этой темой = 0 .(((( Объясните, пожалуйста пошагово, че делать, чтобы при наведении картинка, загруженная через файловый менеджер, увеличивалась до полного размера, а при клике на нее открывалась ссылка. Очень-очень нужно. Сайт
| | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 06:26 | Сообщение # 35 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) likbezz, здравствуйте! С прошедшими праздниками!
Ага, пасибки, и вас с прошедшими ... и наступающими )
...
Quote (Diz6942) Объясните, пожалуйста пошагово, че делать, чтобы при наведении картинка, загруженная через файловый менеджер, увеличивалась до полного размера, а при клике на нее открывалась ссылка. Очень-очень нужно
А тему почитать не судьба? Тут последние страницы как этому и посвящены ...
...
| | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 15:31 | Сообщение # 36 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Quote (likbezz) А тему почитать не судьба?
Ок. Берем скрипт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>
или этот скрипт правильный для меня?Code <script type="text/javascript">
$(document).ready(function(){
/*Start DocumentReady*/
$('.zoom').hover(function(){
$(this).children('img').stop().animate({width:"auto",height:"400px"},400);
},function(){$(this).children('img').stop().animate({width:"auto",height:"200px"},400);
});
/*End DocumentReady*/
});
</script> Добавлено (04.01.2012, 15:31)
---------------------------------------------
И еще. Если я помещаю скрипт в глобальный блок, то прописывать коды на страницах не нужно?
Сообщение отредактировал Diz6942 - Среда, 04.01.2012, 14:56 | | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 18:24 | Сообщение # 37 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) Ок. Берем скрипт
...
поместила его в верхний глобальный блок. Ничего не получилось. Что не так?
А что не так?
Всё верно, кроме одного. Просто “поместить скрипт в глобальный блок” - это далеко не всё.
Для работы данного скрипта нужен скрипт «zoomi.js»
Code <script type="text/javascript" src="http://likbezz.ru/_example/jquery/zoom/zoomi.js"></script>
Кроме того, картинки должны быть помешены в блоки с классом, в данном случае - в спан (span.zoomBox) с классом «zoomBox».
Ни того, ни другого у вас не наблюдается.
...
Quote (Diz6942) или этот скрипт правильный для меня?
Что значит “правильный”?
Здесь нет такого “правильный” или “не правильный”, нужен тот, который Вам нужен/подходит, и никак иначе.
...
Quote (Diz6942) И еще. Если я помещаю скрипт в глобальный блок, то прописывать коды на страницах не нужно?
Нет, не нужно, если данный глобальный блок присутствует на нужных вам страницах.
...
| | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 19:00 | Сообщение # 38 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Поместила два скрипта:
1.Code <script type="text/javascript">
$(document).ready(function(){
/*Start DocumentReady*/
$('.zoom').hover(function(){
$(this).children('img').stop().animate({width:"auto",height:"400px"},400);
},function(){$(this).children('img').stop().animate({width:"auto",height:"200px"},400);
});
/*End DocumentReady*/
});
</script>
2.Code <script type="text/javascript" src="http://likbezz.ru/_example/jquery/zoom/zoomi.js"></script>
и код:
Code <span class="zoomBox">$IMAGE$</span>
в глобальный блок. Но не работает. М.б. "zoomBox" нужно вставлять не в ГБ? сайт
Сообщение отредактировал Diz6942 - Среда, 04.01.2012, 19:01 | | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 19:19 | Сообщение # 39 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) Поместила два скрипта:
1.
Вы что, смеётесь? ... Этот кусок кода совсем от другого скрипта ...
Quote (Diz6942) <script type="text/javascript">
$(document).ready(function(){
/*Start DocumentReady*/
$('.zoom').hover(function(){
$(this).children('img').stop().animate({width:"auto",height:"400px"},400);
....
</script>
Quote (Diz6942) <span class="zoomBox">$IMAGE$</span>
совершенно не относится ...
Не ужели не заметно? ...
...
Вот скрипт от «zoomi» - всё вместе:
Code <script type="text/javascript" src="http://likbezz.ru/_example/jquery/zoom/zoomi.js"></script>
<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>
И блок, соответственный - хотя он у вас правильный ):
Code <span class="zoomBox">$IMAGE$</span>
...
Quote (Diz6942) М.б. "zoomBox" нужно вставлять не в ГБ?
Может быть нужно попробовать хоть немножко понять, что пытаетесь сделать ...
...
| | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 20:07 | Сообщение # 40 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Quote (likbezz)
Вы что, смеётесь? ... Этот кусок кода совсем от другого скрипта ... Не ужели не заметно?
Но все равно что-то не так я делаю... см.
Добавлено (04.01.2012, 19:46)
---------------------------------------------
Quote (likbezz)
Может быть нужно попробовать хоть немножко понять, что пытаетесь сделать
Сообщение отредактировал Diz6942 - Среда, 04.01.2012, 20:49 | | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 21:51 | Сообщение # 41 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) Но все равно что-то не так я делаю... см.
Смотрю, и не нахожу ни одной картинки в боксе ....
...
Может вы ещё раз повнимательнее прочитаете:
Quote (likbezz) Кроме того, картинки должны быть помешены в блоки с классом, в данном случае - в спан (span.zoomBox) с классом «zoomBox».
Это значит, в этом спане ДОЛЖНА быть картинка, КАЖДАЯ картинка, к которой вы хотите применить эффект.
... На текущий момент у вас наблюдается (не понятно зачем) пустой спан, как раз после скрипта - в глобальном блоке AHEADER.
Quote (Diz6942) Я пытаюсь упаковать картинки в бокс
И как вы это делаете?, просто интересно ...
Если вы хотите применить эффект ко всем картинкам в сообщении, пропишите в скрипте свой класс - eMessage ...
Типа:
Code <script type="text/javascript">
$(document).ready(function(){
/*Start DocumentReady*/
$('div.eMessage img').zoom1().mouseover(function(){$(this).zoom2().fadeIn();}).zoom2().mouseout(function(){$(this).fadeOut();});
/*End DocumentReady*/
});
</script>
...
Quote (Diz6942) А м.б. скрипт, который у меня уже был не дает работать новым?
Пока данный скрипт вообще не работает, так как не с чем - нет картинок для обработки.
...
| | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 22:59 | Сообщение # 42 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Quote (likbezz) И как вы это делаете?, просто интересно ...
Я думала, что достаточно скриптов и кода, чтобы картинки автоматом укладывались в (span.zoomBox). Как в (imgBox). Тогда подскажите,плз, как их уложить в span.zoomBox. А если укладывать каждую картинку(при добавлении?) то это где-то в ФМ? Что-то я там как ни крутила, zoomBox не нашла.
Добавлено (04.01.2012, 22:59)
---------------------------------------------
Спасииибо!!!!!!!!!! Только этот код:Code <script type="text/javascript">
$(document).ready(function(){
/*Start DocumentReady*/
$('div.eMessage img').zoom1().mouseover(function(){$(this).zoom2().fadeIn();}).zoom2().mouseout(function(){$(this).fadeOut();});
/*End DocumentReady*/
});
</script>
Что-то я поторопилась... На больших картинках тоже не на всех, а только на первой странице(последние 20 добавленных материалов)
Сообщение отредактировал Diz6942 - Среда, 04.01.2012, 23:15 | | |
|
|
2012-01-04Дата: Среда, 04.01.2012, 23:21 | Сообщение # 43 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) Я думала, что достаточно скриптов и кода, чтобы картинки автоматом укладывались в (span.zoomBox).
?
Нет, не достаточно.
...
Quote (Diz6942) Как в (imgBox).
В «imgBox», если вы забыли, вы писали трёхэтажные условия, при помощи условных операторов ... Не помните?
Можете и здесь так написать, условиями положив картинки в блок с классом.
Вам же виднее к каким именно картинкам нужен подобный эффект. Никто, кроме вас, этого не знает, а скрипт и подавно.
...
Quote (Diz6942) А если укладывать каждую картинку(при добавлении?) то это где-то в ФМ? Что-то я там как ни крутила, zoomBox не нашла.
А что вы там искали? А при чём здесь Файловый менеджер?
«zoomBox» - это имя класса!!!
Смотри выше:
Quote <script type="text/javascript" src="http://likbezz.ru/_example/jquery/zoom/zoomi.js"></script>
<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>
Quote <span class="zoomBox">$IMAGE$</span>
Скрипт обрабатывает блоки с таким классом - «zoomBox»....
....
Quote (Diz6942) работает на всех больших картинках. А на маленьких только на вновь добавленных.((
Для данного скрипта, ссылки на картинки должны быть абсолютными, то бишь, включая «http://my_site.ru» ...
...
Добавлено (04.1.2012, 23:25:34)
---------------------------------------------
Quote (likbezz) Для данного скрипта, сылки на картинки должны быть абсолютными, то бишь, включая «http://my_site.ru» ...
Секунду, сейчас поправлю ... (Кто писал этот скрипт??? ХЗ)
...
Добавлено (04.1.2012, 23:37:52)
---------------------------------------------
Вот.
Code <script type="text/javascript" src="http://likbezz.ru/_example/jquery/zoom/myZoomi.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.eMessage img').zoom1().mouseover(function(){$(this).zoom2().fadeIn();}).zoom2().mouseout(function(){$(this).fadeOut();});
});
</script>
...
| | |
|
|
2012-01-05Дата: Четверг, 05.01.2012, 00:04 | Сообщение # 44 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Спасибо. А куда вставить нужные размеры?
Так будет правильно:Code <script type="text/javascript" src="http://likbezz.ru/_example/jquery/zoom/myZoomi.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.eMessage img').zoom1().mouseover(function(){height:"auto",width:"400px",border:"1px solid #666"},400);
},function()
{$(this).zoom2().fadeIn();}).zoom2().mouseout(function(){height:"auto",width:"185px",border:"0px"},400);
}); {$(this).fadeOut();});
</script>
Сообщение отредактировал Diz6942 - Четверг, 05.01.2012, 00:08 | | |
|
|
2012-01-05Дата: Четверг, 05.01.2012, 00:11 | Сообщение # 45 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) А куда вставить нужные размеры?
Даный скрипт не предназначен для этого.
Quote (Diz6942) Так будет правильно:
Совершенно НЕ правильно.
...
| | |
|
