JQuery Content Fader с миниатюрами и автоматическим исчезновением - PullRequest
Новая
       12

JQuery Content Fader с миниатюрами и автоматическим исчезновением

0 голосов
/ 19 августа 2010

Я ищу специальный фейдер контента с миниатюрами и автоматическим замиранием.Просматривая в Интернете, я нашел много вещей, но не то, что я ищу.В большинстве случаев вы можете перемещать контент, но не исчезать, если вы можете исчезать, вы можете только исчезать изображения.Я пытаюсь сделать это с помощью модуля «Elaing-Plugin», но он не может исчезнуть, только слайд.Затем я пытаюсь "Galleria", здесь вы не можете исчезать текст или что-то, только изображения.

Вот и все: у меня есть некоторые div с некоторым текстом (h, p, кнопка и т. Д.), Я хочу исчезнуть,Я хочу исчезнуть, щелкнув по миниатюрам, но содержимое автоматически исчезнет.

Спасибо за ваши ответы!

Andreas

Ответы [ 2 ]

0 голосов
/ 20 августа 2010

Это код моего div

Это HTML: 

<div id="mainteaser">
    <div id="teaser1">
        <h2>Loremipsum 1</h2>
        <p>Nam liber tempor cum soluta nobis eleifend option congue
        nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cumsoluta nobis eleifend option congue nihil imperdiet doming id quod</p>
        <div class="button"><a href="#">more ...</a></div>
    </div>
    <div id="teaser2">
    <h2>Loremipsum 2</h2>
    <p>Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p>
    <div class="button"><a href="#">more ...</a></div>
    </div>
    <div id="teaser3">
    <h2>Loremipsum 3</h2>
    <p>Nam liber tempor cum soluta nobis eleifend option congue
    nihil imperdiet doming id quod mazim placera. Nam <a href="#">liber tempor</a> cum soluta nobis eleifend option congue nihil imperdiet doming id quod</p>
        <div class="button"><a href="#">more ...</a></div>
    </div>  
</div>

<div id="teaser-thumbs">
    <ul>
    <li><a href="#"><img src="teaser1_thumb.jpg" alt="" /></a></li>
    <li><a href="#"><img src="teaser2_thumb.jpg" alt="" /></a></li>
    <li><a href="#"><img src="teaser3_thumb.jpg" alt="" /></a></li>
    </ul>
</div>

Div с идентификатором "teaser1" и т. Д. Я хочу исчезнуть, нажав на миниатюры вDiv "тизер-превью".Но кроме того, «тизеры» должны исчезнуть автоматически.

0 голосов
/ 19 августа 2010

Это быстрый и грязный способ заставить его работать с тем, что у вас есть: 

$('#teaser-thumbs li').click(function(){
   var teaserDiv = '#' + $(this).children('a img').children('img').attr('title');
   $(this).fadeOut('slow');
   $(teaserDiv).fadeOut('slow');
});

Требуется какой-то способ связать ваши эскизы с вашими DIV, поэтому мне пришлось добавить атрибут TITLE кминиатюры следующим образом: 

<div id="teaser-thumbs">
    <ul>
        <li><a><img src="teaser1_thumb.jpg" alt="" title="teaser1" /></a></li>
        <li><a><img src="teaser2_thumb.jpg" alt="" title="teaser2" /></a></li>
        <li><a><img src="teaser3_thumb.jpg" alt="" title="teaser3" /></a></li>
    </ul>
</div>

Если ваши миниатюры и DIV всегда будут напрямую связаны друг с другом, то есть, если ваш первый <li> всегда будет «связан» с первым <div>в #mainteaser вы можете отказаться от атрибутов заголовка и использовать следующий код: 

$('#teaser-thumbs li').click(function(){
   var teaserDiv = $(this).index();
   $(this).fadeOut('slow');
   $('#mainteaser div:eq('+teaserDiv+')').fadeOut('slow');
});
...