Flexslider thumbnail hover

**bert vanhees** · 14-10-2013, 08:42

Beste,

Op mijn website gebruik ik flexslider, nu heb ik hier ook thumbnails opgezet maar je moet telkens op de thumbnail klikken eer dat je de grote foto ziet.
Nu wil ik graag dat wanneer je over de thumbnail komt (hover) je de grote foto direct ziet. Enig idee als je dit kan aanpassen?

Alvast bedankt,

Bert

**Maikel van de Schans** · 14-10-2013, 14:35

Het is duidelijk dat de code nu een click event heeft dus hier zou je een hover event van kunnen maken. Mogelijk kun je de code / url kunnen plaatsen want we weten natuurlijk niet welke flexslider je gebruikt.

**bert vanhees** · 15-10-2013, 09:59

Heb het geprobeerd, maar mij lukt het niet :-) hieronder vind je de code, het is de laatste versie van Flexslider.

http://jsfiddle.net/ucpFw/

**Maikel van de Schans** · 15-10-2013, 10:38

Als ik hier http://www.woothemes.com/flexslider/ kijk zie ik ook geen optie om het makkelijk te veranderden. Het beste is toch denk ik om de code zo ongeschonden als mogelijk te laten i.v.m. updates. Aan de vraag die je stelde ga ik er van uit dat je deze demo hebt gebruikt: http://flexslider.woothemes.com/thumbnail-slider.html. Als we dan naar de html code kijken zouden we een soort van help functie kunnen maken. Ik zag dat flexslider gebruik maakt van Jquery dus dat is lekker makkelijk.

Code:

  
<script type="text/javascript">    $(window).load(function(){
	   $('.slides > li').hover( function() { // Hover over een van de slides
			$(this).trigger('click'); // Trigger het click event dat je grauw
	   });
    });
</script>

**bert vanhees** · 15-10-2013, 11:43

Bedankt, jammer genoeg werkt deze code niet bij mij :) heb idd de code van de demo gebruikt. Heb je de code zelf geprobeerd want anders ligt de fout bij mij ;-)

**Maikel van de Schans** · 15-10-2013, 13:19

Ja ik heb het in chrome getest en merk ook dat in sommige browser het niet werkt. Heb even naar een mogelijk andere oplossing gezocht. Dit is het resultaat er van:
Dit heb ik getest in Chrome en IE. Je moet natuurlijk je eigen options instellen.

Code:

     
$('#slider').flexslider({        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider){


			//Start
			$('.slides > li').hover( function() {
				slider.flexAnimate( $(this).index(), true ); 
				return false;
			});	  
			//Einde


        }
      });

**bert vanhees** · 16-10-2013, 13:12

Ik zie net dat ik een ander code heb gebruikt dan ik eerst zei over de thumbnails. Het is zo dat ik data-thumb gebruikt, denk je dat dit ook aangepast kan worden?Hieronder de volledige code wat ik heb gebruikt :-)

Code:

<head>
	
	
    <link rel="stylesheet" href="flexslider.css" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="js/jquery.flexslider.js"></script>
  <script type="text/javascript" charset="utf-8">
		$(window).load(function() {
		  $('.flexslider').flexslider({
		    animation: "fade",
		    controlNav: "thumbnails",
		    slideshow: false,
		    slideshowSpeed: 2000,
		  });
		});;
    </script>


    <link rel="stylesheet" type="text/css" href="style.css" />


</head>
<body>
		<div id="container">
<div id="authority_index">
		<div id="wrapper">
        	<!-- start header -->


			<div id="header">
				<div id="header_left">
                  <p>
                    <!--					<img src="images/logo.jpg" alt="The Bay Lodge" width="370" height="60" />
 -->			  
                  </p>
                  <img src="images/logo_tbl2.png" alt="Logo - The Bay Lodge" usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="383,0,530,95" href="http://www.thebaylodge.co.nz" target="_self" alt="The bay lodge" /></map>		  </div>
				<div id="header_right">
<?php include_once("menu.php"); ?>
				</div>
			</div>


			<!-- end header -->
			<!-- start banner -->
			
			<!-- end banner -->
			<!-- start content -->
			<div id="index">


				<div id="column">
                   <div class="flexslider fotogal">
						  <ul class="slides">
						    <li class=""  data-thumb="fotogallerij/visit01/01T.jpg" style="margin-left: 0px;">
						      <img  src="fotogallerij/visit01/01.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/02T.jpg" style="margin-left: 0px;"> 
						      <img src="fotogallerij/visit01/02.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/03T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/03.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/04T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/04.jpg" />
						    </li>
						     <li data-thumb="fotogallerij/visit01/05T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/05.jpg" />
						    </li>
						     <li data-thumb="fotogallerij/visit01/06T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/06.jpg" />
						    </li>
						     <li data-thumb="fotogallerij/visit01/07T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/07.jpg" />
						    </li>
						     <li data-thumb="fotogallerij/visit01/08T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/08.jpg" />
						    </li>
						         <li data-thumb="fotogallerij/visit01/09T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/09.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/10T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/10.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/11T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/11.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/12T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/12.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/13T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/13.jpg" />
						    </li>


						  </ul>
						</div>	


						<table width="100%">


                    <tr>
                      <td class="center_pic"><h3>
                       
						                        <br />
                        Patrick en Olga<br />
                        <a href="photogallery_visitors.php">Back to overview</a>
                      <p>&nbsp;</p></td></tr>
                  </table>
			  </div>
			</div>
			<div class="clear"></div>
			<!-- end content -->
		</div>
	</div>


	<?php include_once("footer.php"); ?>	</div>


  
<script type="text/javascript">    $(window).load(function(){
	   $('ul.slides > li').hover( function() { // Hover over een van de slides
			$(this).trigger('hover'); // Trigger het click event dat je grauw
	   });
    });
</script>

**Maikel van de Schans** · 17-10-2013, 12:48

Zo zou het mogelijk gewoon kunnen. Als het niet lukt zou je dan de webpagina kunnen sturen ben namelijk wel benieuwd wat er dan mis gaat.

Code:

<head>	
	
    <link rel="stylesheet" href="flexslider.css" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="js/jquery.flexslider.js"></script>
  <script type="text/javascript" charset="utf-8">
		$(window).load(function() {
		  $('.flexslider').flexslider({
		    animation: "fade",
		    controlNav: "thumbnails",
		    slideshow: false,
		    slideshowSpeed: 2000,
			start: function(slider){
				//Start
				$('.slides > li').hover( function() {
					slider.flexAnimate( $(this).index(), true ); 
					return false;
				});	  
				//Einde
			}
		  });
		});;
    </script>
	


    <link rel="stylesheet" type="text/css" href="style.css" />




</head>
<body>
		<div id="container">
<div id="authority_index">
		<div id="wrapper">
        	<!-- start header -->




			<div id="header">
				<div id="header_left">
                  <p>
                    <!--					<img src="images/logo.jpg" alt="The Bay Lodge" width="370" height="60" />
 -->			  
                  </p>
                  <img src="images/logo_tbl2.png" alt="Logo - The Bay Lodge" usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="383,0,530,95" href="http://www.thebaylodge.co.nz" target="_self" alt="The bay lodge" /></map>		  </div>
				<div id="header_right">
<?php include_once("menu.php"); ?>
				</div>
			</div>




			<!-- end header -->
			<!-- start banner -->
			
			<!-- end banner -->
			<!-- start content -->
			<div id="index">




				<div id="column">
                   <div class="flexslider fotogal">
						  <ul class="slides">
						    <li class=""  data-thumb="fotogallerij/visit01/01T.jpg" style="margin-left: 0px;">
						      <img  src="fotogallerij/visit01/01.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/02T.jpg" style="margin-left: 0px;"> 
						      <img src="fotogallerij/visit01/02.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/03T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/03.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/04T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/04.jpg" />
						    </li>
						     <li data-thumb="fotogallerij/visit01/05T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/05.jpg" />
						    </li>
						     <li data-thumb="fotogallerij/visit01/06T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/06.jpg" />
						    </li>
						     <li data-thumb="fotogallerij/visit01/07T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/07.jpg" />
						    </li>
						     <li data-thumb="fotogallerij/visit01/08T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/08.jpg" />
						    </li>
						         <li data-thumb="fotogallerij/visit01/09T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/09.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/10T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/10.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/11T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/11.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/12T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/12.jpg" />
						    </li>
						    <li data-thumb="fotogallerij/visit01/13T.jpg" style="margin-left: 0px;">
						      <img src="fotogallerij/visit01/13.jpg" />
						    </li>




						  </ul>
						</div>	




						<table width="100%">




                    <tr>
                      <td class="center_pic"><h3>
                       
						                        <br />
                        Patrick en Olga<br />
                        <a href="photogallery_visitors.php">Back to overview</a>
                      <p>&nbsp;</p></td></tr>
                  </table>
			  </div>
			</div>
			<div class="clear"></div>
			<!-- end content -->
		</div>
	</div>




	<?php include_once("footer.php"); ?>	</div>

**bert vanhees** · 17-10-2013, 13:42

Heb de code volledig overgenomen, maar het werkt idd nog steeds niet. De webpagina is http://www.thebaylodge.co.nz/photogallery_thelodge.php

Flexslider thumbnail hover