JQ img rotator & Fancybox combineren

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

- Roland -

- Roland -

15/08/2013 11:45:17
Quote Anchor link
Ik heb een heel simpele JQ image rotator:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
$(function(){
  $('#foto1 img:gt(0)').hide();
  setInterval(function(){
    $('#foto1 :first-child').fadeOut(300).next('img').fadeIn(fading).end().appendTo('#foto1');},  2000);
});

<div id="foto1">
 <img class="serie"  src="img_8726.jpg" alt="  "  width="160" height="120" />
 <img class="serie"  src="img_8647.jpg" alt="  "  width="160" height="120" />
 <img class="serie"  src="img_8720.jpg" alt="  "  width="160" height="120" />
</div>


Roteert prima !
Ik wil dit samen met Fancybox gebruiken. (klik voor de grootte overlay foto)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$(".serie").fancybox();



Echter Fancybox vereist een <a> tag, een link voor de naam vd grootte foto !

Ik moet het daarom als volgt aanpassen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<div id="foto1">
 <a class="serie" href="groot/img_8726.jpg">  <img class="serie"  src="img_8726.jpg" />  </a>


etc. ......

Echter (hij werkt dan niet meer) de fotorotator snapt dat niet, kan de img dat niet meer localiseren....

Heb ook laten zoeken naar a (ipv img) werkt ook niet,

Heb in een div geprobeerd: <div> <a class="serie" href="groot/img_8726.jpg"> <img class="serie" src="img_8726.jpg" /> </a> </div>
en dan de div laten zoeken/hiden

Hoe kan ik in JQ schrijven dat hij de link mét de foto als 1 geheel ziet .... ( en het hide en de volgende weer infade...)

bvd

of andere tips om zoiets te doen
Gewijzigd op 15/08/2013 11:46:27 door - Roland -
 
PHP hulp

PHP hulp

24/05/2024 08:54:51
 
- Roland -

- Roland -

17/08/2013 10:18:15
Quote Anchor link
**** B U M P ****
 
Frank Nietbelangrijk

Frank Nietbelangrijk

17/08/2013 11:01:02
Quote Anchor link
Een wilde gok maar het zoiets als volgt moeten worden dan
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
$(function(){
  $('#foto1 img:gt(0)').hide();
  setInterval(function(){
    $('#foto1 :first-child').fadeOut(300).next('a').find('img').fadeIn(fading).end().appendTo('#foto1');},  2000);
});

<div id="foto1">
  <a class="serie" href="groot/img_8726.jpg">  <img class="serie"  src="img_8726.jpg"  width="160" height="120" />  </a>
  <a class="serie" href="groot/img_8647.jpg">  <img class="serie"  src="img_8647.jpg"  width="160" height="120" />  </a>
  <a class="serie" href="groot/img_8720.jpg">  <img class="serie"  src="img_8720.jpg"  width="160" height="120" />  </a>
</div>
 
- Roland -

- Roland -

17/08/2013 11:45:40
Quote Anchor link
Dat heb ik geprobeerd, maar werkt niet.

Het probleem zit, denk ik, dat first-child nu niet meer de img is maar de <a>

(én als je het via de <a> pakt moet hij ook de img in die a meenemen... ?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

18/08/2013 11:43:30
Quote Anchor link
Nou speciaal voor jou :-)

ik heb hier een demo en een download gezet van het onderstaande:

Deze laat de foto's netjes in elkaar oversliden.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
    <head>
        <title>Slider with Fancybox!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
        <script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
        <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
        <script type="text/javascript">
    
        function slideSwitch() {
            var $active = $('#foto1 a.active');
        
            if ( $active.length == 0 ) $active = $('#foto1 a:last');
        
            // use this to pull the images in the order they appear in the markup
            var $next =  $active.next().length ? $active.next()
                : $('#foto1 a:first');
        
            // uncomment the 3 lines below to pull the images in random order
            
            // var $sibs  = $active.siblings();
            // var rndNum = Math.floor(Math.random() * $sibs.length );
            // var $next  = $( $sibs[ rndNum ] );
        
        
            $active.addClass('last-active');
        
            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 1000, function() {
                    $active.removeClass('active last-active');
                });
        }

        $(document).ready(function() {
            // koppel fancybox aan de alle <a> elementen in 'foto1' hebben
            $('#foto1 a').fancybox();
            setInterval( "slideSwitch()", 5000 );
        });

        </script>

        <style type="text/css">
        
        #foto1 {
            position:relative;
            height:125px;
        }
        
        #foto1 a {
            position:absolute;
            top:0;
            left:0;
            z-index:8;
            opacity:0.0;
        }
        
        #foto1 a.active {
            z-index:10;
            opacity:1.0;
        }
        
        #foto1 a.last-active {
            z-index:9;
        }
        
        </style>

    </head>

    <body>
        <h1>Slider with Fancybox</h1>
        <p>click a image</p>
        <div id="foto1">
            <a class="active" href="groot/img_8726.jpg"><img src="img_8726.jpg"  width="160" height="120" /></a>
            <a href="groot/img_8647.jpg"><img src="img_8647.jpg"  width="160" height="120" /></a>
            <a href="groot/img_8720.jpg"><img src="img_8720.jpg"  width="160" height="120" /></a>
        </div>
        <p><a href="slider with Fancybox.zip">download complete package</a>
    </body>
</html>
Gewijzigd op 18/08/2013 17:19:53 door Frank Nietbelangrijk
 
- Roland -

- Roland -

21/08/2013 12:00:08
Quote Anchor link
Hoi Frank,

hartelijk dank !! Dat werkt!
hier ga ik verder mee experimenteren
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.