0

ページに4枚の画像が欲しいのですが

ユーザーが各画像をロールオーバーすると、すべてを黒く塗りつぶし、ポップアップウィンドウを表示して、ユーザーが情報を読み、画像をクリックして別のページに移動できるようにします。

私はprettyphotoで欲しいものを持っていますが、ユーザーは画像をクリックする必要があります/画像にカーソルを合わせるだけではありません。

<table class="gallery clearfix" cellpadding="10" cellspacing="40" border="0">
            <tr>
            <td valign="top" width="200px">
                <a href="#info_leadership" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/leadership_development.jpg" style="border:none" height="300" /></a>
            </td>
            <td valign="top" width="200px">
                <a href="#info_team_development" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/team_development.jpg" style="border:none" height="300" /></a>
            </td> 

        </tr>
        <tr>

            <td valign="top">
                <a href="#info_strategic_intelligence" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/strategic_intelligence.jpg" style="border:none" height="300" /></a>
            </td> 
            <td valign="top">
                <a href="#info_emotional_social" rel="prettyPhoto[inline]"><img src="../../images/misc/graphics/emotional_social.jpg" style="border:none" height="300" /></a>
            </td>
        </tr>
        </table>
        <div id="info_leadership" style="display:none;">
            <p class="table"><b>Leadership Development</b></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, 
            cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. 
            Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula,
             varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
             inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar 
             ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p>
         </div>
        <div id="info_team_development" style="display:none;">
            <p class="table"><b>Team Development</b></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, 
            cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. 
            Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula,
             varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
             inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar 
             ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p>
        </div>
        <div id="info_strategic_intelligence" style="display:none;">
            <p class="table"><b>Strategic Intelligence</b></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, 
            cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. 
            Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula,
             varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
             inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar 
             ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p>
        </div>
        <div id="info_emotional_social" style="display:none;">
            <p class="table"><b>Emotional &amp; Social Intelligence</b></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus, magna sed consectetur dapibus, libero ligula elementum urna, 
            cursus venenatis diam augue quis metus. Nulla et libero vitae dolor semper mollis in et est. Donec consequat tellus vel orci laoreet egestas. 
            Maecenas vitae lectus ut est malesuada faucibus vel sit amet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec felis ligula,
             varius vehicula massa. Curabitur suscipit venenatis dolor vel blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
             inceptos himenaeos. Duis facilisis, urna a egestas ultricies, nulla nisl tempus turpis, sed egestas dui mauris a quam. Integer porta pulvinar 
             ligula, quis accumsan mauris pretium eget. Nulla eu tortor quis urna pretium imperdiet. Aenean sed pellentesque elit. Aliquam erat volutpat. </p>
        </div>


        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $("area[rel^='prettyPhoto']").prettyPhoto();
                $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({ theme: 'light_square' });
                $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({ hideflash: true });
            });
        </script>
4

1 に答える 1

0

ホバーでトリガーする方法がある場合は、 PrettyPhoto のドキュメントを確認してください。 しかし、最初に頭に浮かんだのは、jQuery でクリック イベントをシミュレートすることでした。

このようなもの：

$(document).ready(function () {

    $('div').hover(function () {
        $(this).trigger('click');
    });

    $('div').click(function () {
        alert("clicked");
    });

});


JSFiddle

于 2013-01-21T03:11:34.827 に答える