Image loop in lightbox werkt niet zoals ik
Ook heb ik een map met thumbnails die hij niet laad, ik krijg een galler-view met allemaal broken images.
De code die ik tot nu toe heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
$dirname = 'afbeeldingen/slides/dias/';
$thumbs = 'afbeeldingen/slides/thumbs';
$images = scandir($dirname);
$ignore = Array(".", "..");
$ul = '<ul id="auto-loop" class="gallery">';
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
$ul .='<li data-src="'.$dirname.$curimg.'">
<a href="#">
<img src="'.$dirname.$thumbs.'" />
</a>
</li>';
}
}
$ul .='</ul>';
echo $ul;
?>
$dirname = 'afbeeldingen/slides/dias/';
$thumbs = 'afbeeldingen/slides/thumbs';
$images = scandir($dirname);
$ignore = Array(".", "..");
$ul = '<ul id="auto-loop" class="gallery">';
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
$ul .='<li data-src="'.$dirname.$curimg.'">
<a href="#">
<img src="'.$dirname.$thumbs.'" />
</a>
</li>';
}
}
$ul .='</ul>';
echo $ul;
?>
Dit is de plain html code als ik hem niet in een loop zou zetten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul id="auto-loop" class="gallery">
<li data-src="afbeeldingen/slides/dias/Dia1.JPG">
<a href="#">
<img src="afbeeldingen/slides/dias/dia1thumb.jpg" />
</a>
</li>
<li data-src="img2.jpg" >
<a href="#">
<img src="thumb2.jpg" />
</a>
</li>
<li data-src="img3.jpg">
<a href="#">
<img src="thumb3.jpg" />
</a>
</li>
<li data-src="img4.jpg" >
<a href="#">
<img src="thumb4.jpg" />
</a>
</li>
</ul>
<li data-src="afbeeldingen/slides/dias/Dia1.JPG">
<a href="#">
<img src="afbeeldingen/slides/dias/dia1thumb.jpg" />
</a>
</li>
<li data-src="img2.jpg" >
<a href="#">
<img src="thumb2.jpg" />
</a>
</li>
<li data-src="img3.jpg">
<a href="#">
<img src="thumb3.jpg" />
</a>
</li>
<li data-src="img4.jpg" >
<a href="#">
<img src="thumb4.jpg" />
</a>
</li>
</ul>
Als ik met inspect element kijk naar het pad van de thumbnail krijg ik dit pad te zien (wat natuurlijk niet klopt):
Code (php)
1
<img src="afbeeldingen/slides/dias/afbeeldingen/slides/thumbs">
Hier kun je het javascript bestand vinden dat wordt gebruikt:
http://textuploader.com/ohvw
Dit is het scriptje wat ik neerzet boven de loop:
Code (php)
1
2
3
4
5
2
3
4
5
<script>
$(document).ready(function() {
$("#auto-loop").lightGallery();
});
</script>
$(document).ready(function() {
$("#auto-loop").lightGallery();
});
</script>
Gewijzigd op 30/10/2014 12:02:17 door Snelle Jaap
We weten nu niet welke html er gegenereerd wordt (al hebben we wel een geode indruk hiervan)
Ook is het gissen hoe de afbeeldingen worden weergegeven met JavaScript, hier heb je geen code van bij gedaan.
Normaal gesproken kan je met een gallery aangeven dmv het rel attribuut dat ene gallery bij elkaar hoort.
Ik zie alleen data-src en img src. Er wordt niet aangegeven dat het een groep is.
Graag zien wij nog wat cruziale info tegemoet.
Maar waarom sloop je die rommel er dan niet eerst uit? Ikzelf kan immers ook niet werken als mijn bureau een rotzooi is ;-).
- Aar - op 30/10/2014 11:55:43:
In je vorige topic gaf je aan dat de code een rommel was (ongebruikte jQuery functies etc..).
Maar waarom sloop je die rommel er dan niet eerst uit? Ikzelf kan immers ook niet werken als mijn bureau een rotzooi is ;-).
Maar waarom sloop je die rommel er dan niet eerst uit? Ikzelf kan immers ook niet werken als mijn bureau een rotzooi is ;-).
Heb ik gedaan :)
Eerst was het probleem dat ik een hoop conflicten had met jQuery e.d., dat is nu opgelost.
Ik heb nieuwe informatie toegevoegd.
- Aar - op 30/10/2014 12:16:23:
Je zegt dat het pad dus niet klopt? Moet je niet juist een slash voro het pad zetten zodat je afdwingt altijd vanuit je document-root te werken?
De pagina die deze pagina include staat in de root, dus is niet nodig, als ik er ../ voor zet pakt die de images ook niet meer.
<img src="afbeeldingen/slides/dias/afbeeldingen/slides/thumbs">
Is ook dubbelop, want afbeeldingen/slides/dias is voor de volle images, en afbeeldingen/slides/thumbs is voor de thumbnails. Hij zet beide paden dus in 1 img source.
Toevoeging op 30/10/2014 13:04:02:
Eigenlijk wil ik 1 plaatje, en als je daar op klikt dat de lightbox opent. Is het misschien mogelijk alle thumbnails te hiden? En wel te laten zien in de lightbox? Hoe zou ik dat kunnen doen?
Snelle Jaap op 30/10/2014 11:13:32:
Op de 1e regel het je een / staan aan het eind, de tweede niet. Speciale reden?
Vind ik niet zo gek; dat geef je zelf namelijk op:
Code (php)
1
2
3
4
2
3
4
<?php
$dirname = 'afbeeldingen/slides/dias/';
$thumbs = 'afbeeldingen/slides/thumbs';
?>
$dirname = 'afbeeldingen/slides/dias/';
$thumbs = 'afbeeldingen/slides/thumbs';
?>
Op de 1e regel het je een / staan aan het eind, de tweede niet. Speciale reden?
Code (php)
1
<img src="afbeeldingen/slides/dias/afbeeldingen/slides/thumbs">
Vind ik niet zo gek; dat geef je zelf namelijk op:
Snelle Jaap op 30/10/2014 11:13:32:
Code (php)
1
2
3
2
3
<?php
<img src="'.$dirname.$thumbs.'" />
?>
<img src="'.$dirname.$thumbs.'" />
?>
Gewijzigd op 30/10/2014 23:15:28 door Obelix Idefix
Code (php)
1
2
3
4
2
3
4
<?php
$ul .='<li data-src="'.$dirname.$curimg.'">
<a href="#">
?>
$ul .='<li data-src="'.$dirname.$curimg.'">
<a href="#">
?>
dit moet worden
Code (php)
1
2
3
4
2
3
4
<?php
$ul .='<li>
<a href="$dirname.$curimg">
?>
$ul .='<li>
<a href="$dirname.$curimg">
?>
Maar het kan een vereiste zijn volgens jouw javascript
Het tweede stukje
Code (php)
1
2
3
2
3
<?php
<img src="'.$dirname.$thumbs.'" />
?>
<img src="'.$dirname.$thumbs.'" />
?>
Moet volgens mij dan
Code (php)
1
2
3
2
3
<?php
<img src="'.$thumbs.$curimg.'" />
?>
<img src="'.$thumbs.$curimg.'" />
?>
worden. Voorop gesteld dat de thumbs en grote images dezelfde naam hebben.
En voor zover ik weet (als je inderdaad alleen de eerste afbeelding wilt laten zien) moet je ook alleen de eerste keer deze thumb img opnemen in de a-link.
Ik heb hetzelfde een keer gedaan (met behulp van een ander javascript) en dat werkte prima.
Uitgaande van de door jou in eerste instantie opgegeven html code (en er ook vanuit gaande dat dat met data-src en # wel in orde is) zou je dan uiteindelijk zoiets moeten krijgen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul id="auto-loop" class="gallery">
<li data-src="afbeeldingen/slides/dias/Dia1.JPG">
<a href="#">
<img src="afbeeldingen/slides/dias/dia1thumb.jpg" />
</a>
</li>
<li data-src="img2.jpg" >
<a href="#">
</a>
</li>
<li data-src="img3.jpg">
<a href="#">
</a>
</li>
<li data-src="img4.jpg" >
<a href="#">
</a>
</li>
</ul>
<li data-src="afbeeldingen/slides/dias/Dia1.JPG">
<a href="#">
<img src="afbeeldingen/slides/dias/dia1thumb.jpg" />
</a>
</li>
<li data-src="img2.jpg" >
<a href="#">
</a>
</li>
<li data-src="img3.jpg">
<a href="#">
</a>
</li>
<li data-src="img4.jpg" >
<a href="#">
</a>
</li>
</ul>
Gewijzigd op 31/10/2014 00:06:31 door Fred S
Verder opgelost door alle andere thumbnails te hiden en 1 image buiten de loop te zetten, divje een height gegeven met overflow: hidden; daardoor zie je maar 1 image, wanneer je daar op klikt wordt de rest zichtbaar in de lightbox.