JQuery наведите курсор на наложение коллекции изображений colorbox - PullRequest
Новая
       15

JQuery наведите курсор на наложение коллекции изображений colorbox

0 голосов
/ 15 ноября 2010

Я недавно столкнулся с требованием использовать colorbox или подобный плагин лайтбокса jquery как функция мыши запущен событием jQuery hover

Это хорошее место для использования $ .colorbox () и передачи коллекция как параметр REL, но я не могу заставить это работать ..

http://colorpowered.com/colorbox/

. Hover и colorbox работают, когда я передаю href param .. но только для одной картинки 

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset=utf-8 />
    <title>ColorBox Examples</title>
    <style type="text/css">
        body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
        a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
        h2{font-size:13px; margin:15px 0 0 0;}
    </style>
    <link media="screen" rel="stylesheet" href="colorbox.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script src="./jquery.colorbox.js"></script>
    <script>
    $(document).ready(function(){

        $("[rel='example3']").hover( 
            function () { 
                $.colorbox({rel:"example3",width:"800",height:"800"}); 
                },  
            function () { 
                } 
            );

    });
    </script>
</head>
<body>

<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a href="./content/ohoopee1.jpg" rel="example3"  title="Me and my grandfather on the Ohoopee 1.">Grouped Photo 1</a></p>
<p><a href="./content/ohoopee2.jpg" rel="example3"  title="Me and my grandfather on the Ohoopee 2.">Grouped Photo 1</a></p>

<p><a href="./content/ohoopee3.jpg" rel="example3"  title="Me and my grandfather on the Ohoopee 3.">Grouped Photo 1</a></p>

1 Ответ

1 голос
/ 15 ноября 2010

Извините за этот вопрос .. когда я изменил способ, которым я думал об этом .. ответ стал ясен .. colorbox отлично работает с кликом или наведением курсора мыши, конечно ... 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8 />
    <title>ColorBox Examples</title>
    <style type="text/css">
        body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
        a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
        h2{font-size:13px; margin:15px 0 0 0;}
    </style>
    <link media="screen" rel="stylesheet" href="colorbox.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script src="./jquery.colorbox.js"></script>
    <script>
    $(document).ready(function(){

    $('.example3').colorbox({rel:'example3',width:'75%',height:'75%'}).mouseover(function(){ $(this).click();  }); 

    });
    </script>
</head>
<body>

<h2>No Transition + fixed width and height (75% of screen size)</h2>
<p><a href="./content/ohoopee1.jpg" rel="example3" class="example3" title="Me and my grandfather on the Ohoopee 1.">Grouped Photo 1</a></p>
<p><a href="./content/ohoopee2.jpg" rel="example3" class="example3"  title="Me and my grandfather on the Ohoopee 2.">Grouped Photo 1</a></p>
<p><a href="./content/ohoopee3.jpg" rel="example3" class="example3"  title="Me and my grandfather on the Ohoopee 3.">Grouped Photo 1</a></p>

</body>
</html
...