PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
-

JQ img rotator & Fancybox combineren

Door - Roland - op 15-08-2013 11:45 gewijzigd op 15-08-2013 11:46
3.330 views
Ik heb een heel simpele JQ image rotator:


$(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)


$(".serie").fancybox();



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

Ik moet het daarom als volgt aanpassen:


<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
- - Roland -
17-08-2013 10:18
**** B U M P ****
Frank Nietbelangrijk
17-08-2013 11:01
Een wilde gok maar het zoiets als volgt moeten worden dan

$(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 -
17-08-2013 11:45
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
18-08-2013 11:43 gewijzigd op 18-08-2013 17:19
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.

<!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>
- - Roland -
21-08-2013 12:00
Hoi Frank,

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

Reageren

Inloggen om te reageren