slide show voor foto's

Status
Niet open voor verdere reacties.

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
Hallo

Ik wil graag op mijn website een slide show maken met automatische aanpassing van afbeelding. d.w.z. voor mobiel en tablet ook goed zichtbaar als andere scherm resoluties.

Ik heb hier rechts boven op mijn website een plaatje staan waar een artiest komt te staan, maar worden er van eigens steeds meer artiesten. Hoe zorg ik ervoor dat hij d.m.v. zo slide show alle (voorbeeld 5 plaatjes) laat zien om de beurt?

Op internet heb ik al extreem veel tips gelezen over jquery maar geraak nergens echt uit wat ik wil.
 

Dit is exact wat ik zoek.

Maar nu op de website krijgen.
Moet ik een bestand maken met de volledige js code en dit bestand dan opslaan als .js (zonder naam) ???
en de html code gewoon in me body plaatsen, waar ik precies deze slider wil?

Ook staat er "download flexslider" en als ik dat doe krijg ik 10 tallen bestanden die hij download. Dan snap ik het helemaal niet meer wat ik moet doen :(
 
Kopier alle bestanden die u gedownload hebt in de folder van uw site en dan :

Step 1 – Link files

Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!
Code:
<!-- Place somewhere in the <head> of your document -->
<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="jquery.flexslider.js"></script>

Step 2 – Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

Code:
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>

Step 3 – Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

Code:
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
 
Kopier alle bestanden die u gedownload hebt in de folder van uw site en dan :

Geprobeerd, maar echt zonder suc6.

Ik krijg ten eerste geen plaatjes te zien.
Ten 2e hij zet de slider verticaal i.p.v. horizontaal.

De volgende resultaat zie je dan met de bij behorende bestanden. :
slider.jpg

Ik heb dan de volgende opmaak in me code staan:

HTML:
<!DOCTYPE html>
 <html lang="nl">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Hitdance radio</title>
 <meta name="description" content="hitdance radio, met muziek voor jong en oud, en de leukste dj's"> 
 <meta name="keywords" content="dance, hardstyle, apresski, nederlands, rock, jaren 70, jaren 80, jaren 90, hitdance, radio, studio, radio station, verzoekplaat, live streams, hitdance radio, spiegelplaat, online, dj team, speler, verzoekje, boekingen, dj eric, dj sylvester,  facebook, programma, draaien, informatie, sponsors">
 <meta name="viewport" content="width=device-width, user-scalable=yes">
 
 <link href="hitdance.css" rel="stylesheet" type="text/css">
 
 <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="jquery.flexslider.js"></script>

 <script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
 
 </head>

 <body>
 

<div id="sitewrap">
    
    	<div id="header">
		
        
	        	<img class="autoresize" src="images/header.png" title="Hitdance Radio" alt="hitdance logo">  
        
        </div><!-- /headerwrap -->
			
            
        <div id="sitenavigation">
                 <ul class="mainmenu">
                     <li><a href="index.html" target="_top">Home</a></li>
                     <li><a href="nieuws.html" target="_top">Nieuws</a></li>
					 <li><a href="spiegelplaat.html" target="_top">Spiegelplaat</a></li>
                     <li><a href="djteam.html" target="_top">DJ team</a></li>
                     <li><a href="programma's.html" target="_top">Programma</a></li>  
                     <li><a href="links.html" target="_top">Links</a></li>
					 <li><a href="chatbox.html" target="_top">Chatbox</a></li>
                     <li><a href="gastenboek.html" target="_top">Gastenboek</a></li>
                     <li><a href="mail.html">Contact</a></li>
					 <li><a href="faq.html" target="_top">Faq</a></li>
                 </ul>
        </div><!-- /sitenavigation -->    

      	        
        
		 <div class="column-left">
                    
         		<ul class="blocklist">
          
                	<!-- dj-display -->
                    <li class="left-1">
                    
<iframe src="http://server13003.irserv2.com/djdisplay" class="djdisplay"></iframe>
                             
                    </li>
                            
                    <!-- live-stream -->
                    <li class="left-2">

						<h3>Livestreams</h3>

                            <!-- Tekst van maximaal 1 regel die past tussen < en >. Dan blijven de gekleurde blokken even hoog. -->
                            <ul class="buttons">
                                <li><a href="http://37.59.7.51:9926/listen.pls"><img src="images/wnp.png" title="winamp" alt="luister hitdance radio met winamp"></a>Winamp player</li>
                                <li><a href="playlist.asx"><img src="images/wmp.png" title="windows media player" alt="luister hitdance radio me windows media player"></a>Media player</li>
                                <li><a href="playlist.ram"><img src="images/real.png" title="real player" alt="luister hitdance radio met realplayer"></a>Real player</li>
                                <li><a href="playlist.qtl"><img src="images/quick.png" title="quicktime" alt="luister hitdance radio met quicktime player"></a>Quicktime player</li>
							</ul> 

<div>
				<div id="rechten">
	        	<img class="autoresize" src="images/buma.png" title="Buma licentie" alt="Buma">  
				<img class="autoresize" src="images/sena.png" title="Sena licentie" alt="Sena">  
                </div><!-- /rechten -->
</div>
											
                    <!-- join -->
					
                    <li class="left-3">
                    	
                        <h3>boekingen</h3>

                            <!-- Tekst van maximaal 1 regel die past tussen < en >. Dan blijven de gekleurde blokken even hoog. -->
                        <p>Wil jij dat wij bij jou feest komen draaien? Hier vind je de favorite dj van uw keuze.</p>
                        	<a href="boekingen.html" class="leesmeer" target="_top">Meer info</a>   
                    
                    </li> 
                            
                    <!-- extra blok -->
                    <li class="left-4"> 
                    
                    	<h3>Radio dj's gezocht!</h3>
                            <!-- Tekst van maximaal 1 regel die past tussen < en >. Dan blijven de gekleurde blokken even hoog. -->
                        <p>Wil jij graag draaien op dit radio station? Kijk dan rond op deze pagina, daar vind je alle informatie.</p>
                        	<a href="gezocht.html" class="leesmeer" target="_top">Meer info</a>                 
                    </li>
              
               </ul><!-- /blocklist -->       

		</div><!-- column-left -->
		
        <div class="main">
				 
				 <iframe src="http://server13003.irserv2.com/nowplaying/" name="iReQuest_NoWPlayinG" style="height: 50px; width: 100%;"></iframe>
				
				<div class="content">
				
                	<h1>Welkom bij Hitdance radio.</h1>
                 
                 	
<p>Hitdance is een radio station dat zich richt op mensen die van lekkere Dance hits houden. Hierin verstaan wij o.a. Top 40, Dance, Hard Dance, 
Trance, Hardstyle, House &amp; Hardcore. Maar bij ons worden natuurlijk ook: Nederlands talige muziek, Après-ski, jaren 80 &amp; 90 gedraaid. 
Met zelfs op Woensdag een Rock middag door Dj Christian.</p>


<p>Ons radio station bestaat inmiddels bijna 1 jaar en heeft veel leuke opties open staan welke u kunt bekijken op uw gemak. Zo hebben wij een eigen 
verzoekjes server waar u als luisteraar uw verzoekplaat kan opgeven. Deze zal door de aanwezige dj z.s.m. gedraaid worden. Doordat wij uitgebreide 
muziek collectie hebben, hebben wij hierin veel keuzes. Echter, kan het voorkomen dat de dj deze plaat niet heeft, Hij zal dan proberen een andere 
plaat te draaien.</p>


<p>Op deze website vind u volop informatie over ons radio station, en hebben we een reuze gezellige chatbox klaar staan. Voornamelijk in de avond 
uren is er meestal wel een chatter minimaal aanwezig en hebben een vaste programma elke week voor u klaar staan.</p> 


<p>Ook zoeken we natuurlijk radio dj's die ons team willen komen versterken, en zijn of haar kunsten aan u laten horen.
Deze dj's krijgen natuurlijk velen extra's die voor u als bezoeker of luisteraar interessant zijn om er naar te komen luisteren.</p>

<p>Kortom u heeft hier altijd veel luister plezier, en op onze pagina met "nieuws" staan de meeste actuele updates voor u klaar. Je kan reageren 
in onze gastenboek en/of ons een e-mail sturen als u dat wenst. En voor vragen kijkt u eerst even in onze faq op deze webpagina.</p> 

<p>Wij wensen u allen veel luister plezier bij Hitdance radio.</p>

					
                 </div><!-- /content -->
				 
        </div><!-- /main -->
        
		
		 <div class="column-right">
                    
         		<ul class="blocklist">
          
                	<!-- dj-display -->
                    <li class="right-1">
					<h3>Nieuwe muziek</h3>
					
                    	<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>
						
						<P STYLE="color: #ffff00; background-color: #000000;">Bent u de nieuwe Artiest of dj die graag bekend wilt worden? 
						Dan zit u hier goed, Klik op aanmelden en wij ontvangen uw reactie om uw banner te plaatsen zoals bovenstaande afbeelding.</p>
					
					<a href="mail.html" class="leesmeer" target="_top">Aanmelden.</a>
					
                    </li>
                            
                    <!-- live-stream -->
                    <li class="right-2">
                    	<h3>Verzoekplaat</h3>
                        
                        <p>Klik op meer info en vul hier je verzoekplaat in, en wij draaien deze dan speciaal voor jou op de radio. 
						Soms kan het zijn dat een dj live is maar geen verzoekjes aanneemt, probeer het dan op een ander tijdstip opnieuw.</p>
                        	<a href="verzoekjes.html" class="leesmeer" target="_top">Meer info</a> 
							
                    </li>    
                            
                    <!-- join -->
                    <li class="right-3">
                    	<h3>Verjaardag</h3>
                        
                             <!-- Tekst van maximaal 1 regel die past tussen < en >. Dan blijven de gekleurde blokken even hoog. -->
                        <p>Geef op wie jij graag zou willen verassen met zijn of haar verjaardag. Binnen 3 dagen heb je een reactie terug van ons, en 
						wordt hij of zij in het zonnetje gezet in onze uitzending.</p>
                        	<a href="verjaardag.html" class="leesmeer" target="_top">Geef op</a>
                            
                    </li> 
                            
                    <!-- extra blok -->
                    <li class="right-4"> 
					<h3>Social media</h3>
                        
                            <!-- Tekst van maximaal 1 regel die past tussen < en >. Dan blijven de gekleurde blokken even hoog. -->
                        <p><a href="https://www.facebook.com/hitdanceradio" target="_blank"><img src="images/facebook.png" class="autoresize" title="facebook" alt="facebook"></a></p>
                        	<p><a href="https://twitter.com/hitdance_radio" target="_blank"><img src="images/twitter.png" class="autoresize" title="twitter" alt="twitter"></a></p>
							<p><a href="http://myves.nl/user/hitdance_radio" target="_blank"><img src="images/myves.png" class="autoresize" title="myves" alt="myves"></a></p>
							<a href="socialmedia.html" class="leesmeer" target="_top">Meer info</a>
                    </li>
              
               </ul><!-- /blocklist -->       

		</div><!-- column-right -->
   
<div class="footer">
<!-- Begin JouwStats code-->
<script src="http://www.jouwstats.nl/count.js" type="text/javascript"></script>
<script type = "text/javascript">
//<![CDATA[
count(39006);
//]]>
</script>
<!-- Einde JouwStats code-->

<p>Deze website wordt gelinkt met:</p> 

</div><!-- /footer -->

   <table class="table">
	  <tr>
         <td><h4>All radio</h4><hr>
         <ul>
		 <li>Overzicht</li>
		 <li>Radio links</li>
		 <li>Iphone & ipad</li>
         </ul>
         <a href="http://www.allradio.nl" class="leesmeer" target="_blank">Meer info</a>
         <td><img src="links/5.jpg" alt="online radio">
         </td>
     </tr>  
	 </table>  

		
		<div id="size-indicator">
        	<!-- div die een kleur geeft onderin de site. Hieraan kun je zien welk device het is. Kleuren staan in css. -->
        </div>
        
        
        <div class="clear">
        	<!-- div zorgt ervoor dat de sitewrap alle divs omsluit -->
        </div>
    
    </div><!-- /sitewrap --> 
 
 	<script type="text/javascript" src="http://prostreams.nl:2199/system/streaminfo.js"></script>

 </body>
 </html>

Ik heb exact de stappen gevolgd maar ergens is iets mis gegaan.
 
Het probleem ligt waarschijnlijk in de paths...
Kijk naar deze code

Code:
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>

Waar zijn images slide1.jpg, slide2.jpg, slide3.jpg? Als zij in de images folder zijn, dan moet img tag veranderd worden bv. <img src="images/slide1.jpg"/>

Controleer nog eens alle paths.
 

klopt :eek::eek::eek:

Hierna weer getest, maar kwam er achter dat hij een extra achter grond plaatje mee pakte.
van deze css regel:

Code:
[COLOR="#FF0000"].blocklist li [/COLOR]{ background:url(images/bg-speakers.png) bottom right no-repeat; display: inline-block; margin: 3px 0px; padding: 5%; width: 90%;}

Ik denk hoe kan dat nou toch???

Wat blijkt nu.

In mijn eigenste css code heb ik het volgende staan:

Code:
/* achtergrondkleuren blokjes */
.blocklist li.left-1 {background-color: #990033;}  /* links 1 */
.blocklist li.left-2 {background-color: #993333;}	 /* links 2 */
.blocklist li.left-3 {background-color: #996666;}	 /* links 3 */
.blocklist li.left-4 {background-color: #999966;}	 /* links 4 */
.blocklist li.right-1 {background-color: #990033;} /* rechts 1 */
.blocklist li.right-2 {background-color: #993333;} /* rechts 2 */
.blocklist li.right-3 {background-color: #996666;} /* rechts 3 */
.blocklist li.right-4 {background-color: #999966;} /* rechts 4 */

Maar deze code:
Code:
.blocklist li.right-1 {background-color: #990033;} /* rechts 1 */
is vervangen door deze code: .reclame li.right-1 {background-color: #990033;} /* rechts 1 */

En in de html dit aangepast.

HTML:
		 <div class="column-right">
                   [COLOR="#FF0000"] <ul class="reclame">[/COLOR]
          
                	<!-- dj-display -->
                    <li class="right-1">
					<h3>Nieuwe muziek</h3>
								
<div class="flexslider">
<ul class="slides">
<li>
<img src="artiesten/slide1.png" />
</li>
<li>
<img src="artiesten/slide2.jpg" />
</li>
<li>
<img src="artiesten/slide3.jpg" />
</li>
</ul>
</div>		
						<P STYLE="color: #ffff00; background-color: #000000;">Bent u de nieuwe Artiest of dj die graag bekend wilt worden? 
						Dan zit u hier goed, Klik op aanmelden en wij ontvangen uw reactie om uw banner te plaatsen zoals bovenstaande afbeelding.</p>
					
					<a href="mail.html" class="leesmeer" target="_top">Aanmelden.</a>
					
                    </li>

nu werkt hij dus wel goed.
alleen de plaatjes moeten wel exact de zelfde afmetingen krijgen zie ik wel:

slider2.jpg
 
Laatst bewerkt:
U hebt een plugin (firebug) voor mozilla en daarmee kunt u zien in welke file die css code (.reclame li.right-1 {background-color: #990033;} ) staat. En als u het vindt, verwijder het en dan zou het in orde moeten komen.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan