JQuery наложение от слова - PullRequest
       7

JQuery наложение от слова

0 голосов
/ 01 февраля 2012

Я использую хороший пример наложения из ссылка , но хочу, чтобы jquery реагировал на клики по тексту, а не по изображению. Я думаю, что я на правильном пути с

$("img[rel]").overlay();

Я попытался использовать div вместо img. Можно ли просто использовать ссылку для наложения и запустить ее таким образом Как это изменит $ ("img [rel]"). Overlay ();

Триггеры

<img src="thumbs/barcelona-pavilion.jpg" rel="#mies1"/>
<img src="thumbs/barcelona-pavilion2.jpg" rel="#mies2"/>

наложений

    <!-- large image -->
    <img src="photos/barcelona-pavilion-large.jpg" />

    <!-- image details -->
    <div class="details">
        <h3>The Barcelona Pavilion</h3>

        <h4>Barcelona, Spain</h4>

        <p>The content ...</p>
    </div>

</div>

<!-- second overlay -->
<div class="simple_overlay" id="mies2">
    ...
</div>

CSS

/* the overlayed element */
.simple_overlay {

    /* must be initially hidden */
    display:none;

    /* place overlay on top of other elements */
    z-index:10000;

    /* styling */
    background-color:#333;

    width:675px;    
    min-height:200px;
    border:1px solid #666;

    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;  
}

/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(../img/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

/* styling for elements inside overlay */
    .details {
        position:absolute;
        top:15px;
        right:15px;
        font-size:11px;
        color:#fff;
        width:150px;
    }

    .details h3 {
        color:#aba;
        font-size:15px;
        margin:0 0 -10px 0;
    }

JS

$("img[rel]").overlay();

1 Ответ

0 голосов
/ 01 февраля 2012

Я думаю, вы должны использовать класс для его вызова, например:

HTML:

<a href="thumbs/barcelona-pavilion.jpg" class="overlay">Link 1</a>
<a href="thumbs/barcelona-pavilion2.jpg" class="overlay">Link 2</a>

JS:

$("a.overlay").overlay();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...