Вход

Просмотр полной версии : задержка срабатывания zoomi (увеличения картинки при наведении курсора)


Roosh
28.09.2010, 17:41
есть фотоальбом (к примеру, 3 на 3 фото), с помощью jQuery и zoomi сделала увеличение картинки при наведении на нее курсора мыши (как делать смотрела здесь http://forum.wm-help.net/topic1643s0.html). Теперь проблема в том, что увеличивается картинка в то же мгновение, как на нее находит курсор, а так как она закрывает полальбома, то получается я не могу просмотреть соседние фото (или картинки, которые в середине фотоальбома - крайние увеличенные изображения закрывают все)
Вопрос в том, можно ли сделать задержку увеличения картинки примерно на 1 секунду? ...чтобы человек выбрал нужное фото и остановил курсор на нужной картинке
фотоальбом здесь http://www.roosh.ru/masters/3-gordeeva-lyubov/vse/

код скрипта zomi
// zoomi - A zoom for images ~ Sean Catchpole - Version 0.9
(function($){

$.fn.zoomi = function() {
$(this).filter("img").each(function(){
if(!this.z) {
$(this).zoom1().mouseover(function(){$(this).zoom2 ().show();});
$(this.z).mouseout(function(){$(this).hide();}); }
});
return this;
}

$.fn.zoom1 = function() {
$(this).each(function(){
var e = this;
$(e).css({'position':'relative','z-index':'8'}).after('<img class="'+e.className+'">');
e.z = e.nextSibling;
$(e.z).removeClass("zoomi").addClass("zoom2").attr("src",e.alt || e.src)
.css({'position':'absolute','z-index':'10'});
$(e.z).hide();
});
return this;
}

$.fn.zoom2 = function() {
var s = [];
this.each(function(){
var e = this;
if(!e.z) e = $(e).zoom1()[0]; s.push(e.z);
if(!e.z.complete) return;
if(!e.z.width) { $(e.z).show(); e.z.width=e.z.width; $(e.z).hide(); }
$(e.z).css({left:$(e).offsetLeft()-(e.z.width-e.scrollWidth)/2+'px',
top:$(e).offsetTop()-(e.z.height-e.scrollHeight)/2+'px'});
});
return this.pushStack(s);
}

$.fn.offsetLeft = function() {
var e = this[0];
if(!e.offsetParent) return e.offsetLeft;
return e.offsetLeft + $(e.offsetParent).offsetLeft(); }

$.fn.offsetTop = function() {
var e = this[0];
if(!e.offsetParent) return e.offsetTop;
return e.offsetTop + $(e.offsetParent).offsetTop(); }

$(function(){ $('img.zoomi').zoomi(); });

})(jQuery);

Octane
28.09.2010, 19:01
не дублируйте темы

Roosh
28.09.2010, 19:11
больше не буду) надеялась, что так мне быстрее ответят...

monolithed
28.09.2010, 19:28
в jQuery для этого предусмотрен метод delay() (http://api.jquery.com/delay/)

Roosh
28.09.2010, 19:59
monolithed, а можете более подробно написать, что делать? я в скриптах разбираюсь только, когда показывают "нажать нужно на эту кнопочку"))) а точнее совершенно не понимаю, что делать((

monolithed
28.09.2010, 21:42
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
div{
background: red;
position: absolute;
left: 26%;
width: 50px;
height: 50px;
}
</style>

<script type="text/javascript">
$(function(){
function runFunction(){
$('div').show('slow').animate({left:'+=350', opacity: 0.05},1500).animate({left:'-=350', opacity: 1},1500, runFunction);
}
setTimeout(runFunction, 1500);
});
</script>

<div></div>

Roosh
28.09.2010, 21:58
красиво))) завораживает... но, кажется, мне не это нужно... как я поняла, мне нужно куда-то вставить .delay(1000) но вот куда? в вашем коде его вообще нет

Roosh
28.09.2010, 22:01
..может нужно прописывать здесь? (это кусок из header.php)

<script type="text/javascript" src="http://www.roosh.ru/wp-content/themes/twentyten/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="http://www.roosh.ru/wp-content/themes/twentyten/zoomi.js"></script>
<script type="text/javascript">

// <!-- Examples of dynamically calling zoomi -->
$(function(){

$('#zoomme img').zoom1().click(function(){
$(this).zoom2().fadeIn().click(function(){
$(this).hide(); return false; })
.end().parent().addClass('red'); return false; });

for(i=1; i<=5; ++i)
$('#bleach').append('<img class="zoomi" src="bleach/'+i+'.jpg" height="110">');
$('#bleach img.zoomi').zoomi();

$('.bw img')
.zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); })
.zoom2().mouseout(function(){ $(this).fadeOut(1600); });
});

</script>

monolithed
28.09.2010, 22:32
Сделать запуск функции по истечении к.л. времени, можно несколькими способами, скажем через delay() или setTimeout();

к примеру так:
$('#id').delay(1500).queue(function(){
someFunction();
//etc
});

или так:
setTimeout(someFunction, 1500);

В своем примере я использовал второй вариант.
разбираться, что и как там у вас должно вызываться, нет времени, загрузите код на http://www.jsfiddle.net, чтобы была наглядность

Roosh
29.09.2010, 06:58
пробовала делать как в 1 варианте. в header.php добавила delay
<script type="text/javascript" src="http://www.roosh.ru/wp-content/themes/twentyten/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="http://www.roosh.ru/wp-content/themes/twentyten/zoomi.js"></script>
<script type="text/javascript">

// <!-- Examples of dynamically calling zoomi -->
$(function(){

$('#zoomme img').zoom1().click(function(){
$(this).delay(1000).zoom2().fadeIn().click(functio n(){
$(this).hide(); return false; })
.end().parent().addClass('red'); return false; });

for(i=1; i<=5; ++i)
$('#bleach').append('<img class="zoomi" src="bleach/'+i+'.jpg" height="110">');
$('#bleach img.zoomi').zoomi();

$('.bw img')
.zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); })
.zoom2().mouseout(function(){ $(this).fadeOut(1600); });
});

</script>

..мне ведь нужна остановка функции перед увеличением картинки на 1сек..но это почему-то не сработало

monolithed
29.09.2010, 07:46
Я вам до этого привел пример с функцией, которая вызывается через 1,5 сек, неужели так сложно его проанализировать?

http://javascript.ru/setTimeout

Roosh
29.09.2010, 22:57
спасибо за ссылку. проанализировала, но все равно ничего не получилось..
теперь в header.php такой код:
<script type="text/javascript" src="http://www.roosh.ru/wp-content/themes/twentyten/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="http://www.roosh.ru/wp-content/themes/twentyten/zoomi.js"></script>
<script type="text/javascript">

// <!-- Examples of dynamically calling zoomi -->
$(function(){

$('#zoomme img').zoom1().click(function(){
$(this).zoom2().fadeIn().click(function(){
$(this).hide(); return false; })
.end().parent().addClass('red'); return false; });
setTimeout(function(){ $(this).zoom2().fadeIn().click(function(){ $(this).hide(); return false; }, 1500)

for(i=1; i<=5; ++i)
$('#bleach').append('<img class="zoomi" src="bleach/'+i+'.jpg" height="110">');
$('#bleach img.zoomi').zoomi();

$('.bw img')
.zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); })
.zoom2().mouseout(function(){ $(this).fadeOut(1600); });

</script>

пробовала такой, тоже никакого эффекта((
<script type="text/javascript" src="http://www.roosh.ru/wp-content/themes/twentyten/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="http://www.roosh.ru/wp-content/themes/twentyten/zoomi.js"></script>
<script type="text/javascript">

// <!-- Examples of dynamically calling zoomi -->
$(function(){

$('#zoomme img').zoom1().click(function(){
$(this).zoom2().fadeIn().click(function(){
$(this).hide(); return false; })
.end().parent().addClass('red'); return false; });

for(i=1; i<=5; ++i)
$('#bleach').append('<img class="zoomi" src="bleach/'+i+'.jpg" height="110">');
$('#bleach img.zoomi').zoomi();

$('.bw img')
.zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); })
.zoom2().mouseout(function(){ $(this).fadeOut(1600); });
setTimeout(function(){ $(this).zoom2().fadeIn().click(function(){ $(this).hide(); return false; }, 1500);
});
</script>
посмотрите, пожалуйста, может я не то или не туда вставляю..

monolithed
29.09.2010, 23:23
так подойдет? http://www.jsfiddle.net/RTq5N/

Roosh
30.09.2010, 22:51
а что там должно происходить? картинка не просматривается, скрипт никак не работает, при нажатии на место картинки выскакивает надпись: "403 Forbidden"

monolithed
01.10.2010, 00:37
долго собирались потому что: http://www.jsfiddle.net/RTq5N/2/