Simpelste foto-klikker voor meerdere containers op één pagina

Status
Niet open voor verdere reacties.
F

Fredemel

Gebruiker
Lid geworden
2 jun 2008
Berichten
123
Geachte Lezer,

Ik wil in meerdere containers op één pagina een foto-viewer maken over meerdere onderwerpen, waarbij de foto's d.m.v. een muisklik opvolgend zijn (per container).
Ik heb me een ongeluk gezocht op internet, maar ik heb de oplossing niet gevonden. Wel alternatieven met javascript of PHP.

Ik wil eventueel een klein beetje JS gebruiken, maar niet teveel. De foto's hoeven alleen maar te veranderen na een klik (op een pijltje, < >, of zoiets)....

Meer dan 5 foto's worden er niet gebruikt per container.

Wie heeft een simpele oplossing voor me.

Bij voorbaat ZEER dank....!

Mvg Fred
 
Wat bedoel je met container? Een blok?
 
Een slideshow kan je niet zonder JavaScript maken. In jouw geval is geen PHP oplossing nodig vermoed ik. HTML is voor de structuur van een pagina, CSS is voor de opmaak van een pagina. Deze 2 bij elkaar is de vormgeving.

JavaScript is nodig voor functionaliteit, bijvoorbeeld voor drukknoppen < en > en voor de overgang tussen de slides.

Zelf maken met een tutorial, voorbeelden
Library voor een (carousel) slider gebruiken, voorbeelden

Een veelgebruikte slider is OWL, hier een demo
 
Laatst bewerkt:
Geachte,

Deze foto als voorbeeld:helpmijVraag.png

Ik wil graag per blok 4 foto's plaatsen en de kijker kan dan via een pijl of ">" naar de volgende image gaan (van foto 4 weer naar foto 1)
Ik heb weer uren geprobeerd van de op het internet beschikbare mogelijkheden, maar ik kom er niet uit...... Met name JS aanpassen....
Dat gaat mijn "2 hersencellen" te boven......:(

Dus ALS iemand me hierin kan helpen.........

Dit is de code per "container"of "blok"
Code: 
<!--=============================================================================================== -->
	<!-- AANBOD  OCCASIONS -->
<!--=============================================================================================== -->
<dIV class="blok"><!--  BEGIN  OCCASIONS   -->
	<Div class="blokHeader">BMW i3 <br> € 33.00,- </Div>
	<img class="blokImg" src="img/autos/bmw_i3.jpg" width="100%" alt="effe">
		<table style="width:100%; text-align:left; font-size:.8em; ">
		  <tr>	<td>Bouwjaar</td>	<td>20xx</td>		     </tr>
		  <tr>	<td>Km-stand</td>	<td>9.000 km</td>	     </tr>
		  <tr>	<td>Brandstof</td>	<td>Electrisch</td>	     </tr>
		  <tr>	<td>Transmissie</td>	<td>Automaat</td>	      </tr>
		  <tr>	<td>APK tot      </td>	<td>20-dec-2023</td>     </tr>
		  <tr>	<td>Opmerking:</td>	<td>Trekhaak, etc</td>    </tr>
		</table>
</dIV>

En ergens..... wil ik de code stoppen voor een "image-slider". Dat zou perfect zijn...

Graag hulp van "Helpmij"....:thumb:
 
Deze lijkt nog het meeste op wat ik zoek,... ALLEEN.......
Hoe kan de javascript-code aangepast worden zodat deze in de drie (auto)-blokken werkt.
Het mooie van de code is dat ik er zoveel als ik wil foto's in kan laten zien.....
Alleen nu nog voor elke blok (container of wrapper....)......

Ik kan de code niet zondermeer kopieren met andere foto's, want dan gaat
hij NA de EERSTE drie "mouse-cliks" pas verder met de foto's van het tweede blok...

Code: 
<!DOCTYPE html>
<html>
<head>
	<title>imagechange onClick</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .imageSlides { display:none}
    img { margin:auto; display:block;  width:100%;}
/* Our main images-slideshow container */
    .images-slideshow {  max-width:200px;  position:relative;  margin:auto; border:3px solid red; }
/*Style for ">" next and "<" previous buttons */
    .slider-btn{ cursor:pointer;  position:absolute;  bottom:20px;  width:10px;  padding:8px 16px;  margin-top:-22px;  color:yellow;  font-weight:bold;
    font-size:18px;  transition:0.6s ease;  border-radius:0 3px 3px 0;  user-select:none;  background-color:red;  border-radius:50%;}
/* setting the position of the previous button towards left */
    .previous {  left:2%; }
/* setting the position of the next button towards right */
    .next {  right:2%;}
/* On hover, adding a background color */
    .previous:hover, .next:hover { color:red; background-color:aqua; }
</style>    
</head>

<body>
<div class="images-slideshow">
        <div class="imageSlides fade">    <img src="img/profile1.jpg">        </div>
        <div class="imageSlides fade">    <img src="img/profile2.jpg">        </div>
        <div class="imageSlides fade">    <img src="img/profile3.jpg">        </div>
        <a class="slider-btn previous" onclick="setSlides(-1)">❮</a>
        <a class="slider-btn next" onclick="setSlides(1)">❯</a>
</div>
    
<script>
    var currentIndex = 1;
        displaySlides(currentIndex);
    function setSlides(num) {
        displaySlides(currentIndex += num);
    }
    function displaySlides(num) {
        var x;
        var slides = document.getElementsByClassName("imageSlides");
        if (num > slides.length) { currentIndex = 1 }
        if (num < 1) { currentIndex = slides.length }
        for (x = 0; x < slides.length; x++) {
            slides[x].style.display = "none";
        }
        slides[currentIndex - 1].style.display = "block";
    }
</script>
</body>
</html>

Ik hoop dat er iemand is die..........

Bvd...!
 
De code die je geeft zal niet met meerdere slideers werken.

Volg deze tutorial, die lijkt op jouw code.
Lees/gebruik uit deze tutorial het stukje JavaScript bij "Multiple Slideshows"
 
Dank Bron,
Het ergste is dat ik deze w3Schools-code heb gebruikt, maar ik wist ‘m niet aan te passen voor 3 of meer containers…
Ik ga het opnieuw proberen.
Dank…!!
 
De w3schools slideshow heb ik iets aangepast zodat het voor jou werkt.
Ik vermoed dat je niet in de gaten had dat JavaScript (net als veel andere programmeertalen) vanaf 0 telt.
 

Bijlagen

OPGELOST....! Schitterdende én gemakkelijke IMG-sliderS op één pagina

Bron,.....

HARTELIJK dank voor de oplossing. Hier kan ik absoluut mee verder....

Tja,.... ik heb de JS-code wel "-tig" x bekeken en getracht deze te begrijpen, maar helaas........
Ik heb wellicht "meer verstand van verzekeren"......:D :confused:

OPGELOST.. gelukkig.
 
Graag gedaan. Suc6 met de website :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan