/u/366655/IMG_4061%2520-%2520kopie.JPG?f=community)
Beste mede tweakers, ik heb deze vraag al in de bootstrap forums gesteld maar geen reactie gekregen. Ik hoop dat jullie mij willen/kunnen helpen.
Als je op *snip* spam op een afbeelding klikt krijg je een modal met meer informatie. Elke modal heeft een image carousel. Nu is het probleem dat wanneer je 2 modals opent en sluit de slider van de carousels in alle andere modals niet meer werkt; je kan dus niet meer door de afbeeldingen bladeren.
De enige suggestie voor een fix die ik kon vinden krijg ik niet werkend: https://github.com/twbs/bootstrap/issues/3351
Als tijdelijke oplossing herlaad ik de pagina na het sluiten van een modal, wat natuurlijk niet erg netjes is.
(ik kan de reload nu niet uit zetten omdat de website ergens dezer dagen gereviewd wordt door een docent)
De modal wordt in de main file aangemaakt:
En de content wordt uit een andere file ingeladen:
Elke modal heeft een andere externe file. De content is verschillend, maar de setup hetzelfde.
De gebruikte plug-ins zijn: Bootstrap 3.1.1, jQuery 1.11.0, jQuery Nav 2.2, jQuery SerialScroll 1.2.2 en QuickSand 1.4.
Andere bekende bugs zijn:
- YouTube video's stoppen niet met spelen na het sluiten van de modal in IE (tijdelijk gefixed door de reload).
- Na sorteren van het portfolio zijn de afbeeldingen niet meer responsive.
Dit was de eerste keer dat ik een website heb gemaakt en met html en javascript heb gewerkt, bovendien was het onder tijdsdruk, dus de code zal niet optimaal en even netjes zijn.
Als je op *snip* spam op een afbeelding klikt krijg je een modal met meer informatie. Elke modal heeft een image carousel. Nu is het probleem dat wanneer je 2 modals opent en sluit de slider van de carousels in alle andere modals niet meer werkt; je kan dus niet meer door de afbeeldingen bladeren.
De enige suggestie voor een fix die ik kon vinden krijg ik niet werkend: https://github.com/twbs/bootstrap/issues/3351
Als tijdelijke oplossing herlaad ik de pagina na het sluiten van een modal, wat natuurlijk niet erg netjes is.
(ik kan de reload nu niet uit zetten omdat de website ergens dezer dagen gereviewd wordt door een docent)
De modal wordt in de main file aangemaakt:
code:
1
2
3
4
5
6
| <div class="modal fade" tabindex="-1" id="info_modal" data-remote="modals/modalFrame.html">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div> |
En de content wordt uit een andere file ingeladen:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3 class="modal-title">title</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6">
<p>
info text
</p>
</div>
<!-- Information table -->
<div class="col-sm-6 col-md-6">
<table class="table table-condensed table-bordered table-hover" id="table">
<tbody>
<tr>
<td class="text-left" style="font-weight:bold">Project Type</td> <!-- Project type info here -->
<td colspan="2">Educational</td>
</tr>
</tbody>
</table>
</div>
</div>
<p></p>
<div class="row">
<!-- Image Carousel -->
<div class="col-sm-6 col-md-6">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="images/700x500.gif" target="_blank"> <!-- Image link here to open it fullscreen in new tab -->
<img src="images/700x400.gif" alt=""> <!-- Image link here to show thumbnail-->
</a>
<!--<div class="carousel-caption"> Caption code under he images if needed
<p>Caption text here</p>
</div>-->
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" data-slide="next" href="#myCarousel">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!-- Video -->
<div class="col-sm-6 col-md-6">
<div class="video-container">
<iframe src="//www.youtube.com/embed/XQu8TTBmGhA?rel=0;html5=1" frameborder="0" id="myVidPlayer"></iframe> <!-- Video link here -->
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-custom btn-default" data-dismiss="modal">Close</a>
</div> |
Elke modal heeft een andere externe file. De content is verschillend, maar de setup hetzelfde.
De gebruikte plug-ins zijn: Bootstrap 3.1.1, jQuery 1.11.0, jQuery Nav 2.2, jQuery SerialScroll 1.2.2 en QuickSand 1.4.
Andere bekende bugs zijn:
- YouTube video's stoppen niet met spelen na het sluiten van de modal in IE (tijdelijk gefixed door de reload).
- Na sorteren van het portfolio zijn de afbeeldingen niet meer responsive.
Dit was de eerste keer dat ik een website heb gemaakt en met html en javascript heb gewerkt, bovendien was het onder tijdsdruk, dus de code zal niet optimaal en even netjes zijn.
[ Voor 3% gewijzigd door RobIII op 28-03-2014 19:19 ]
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
Dat is waarom we niet graag hebben dat er naar complete sites gelinkt wordt (naast dat 't spammerig overkomt). Als je zo'n testcase hebt opgezet en je probleem gereproduceerd dan heb je zélf ook een "speeltuin" waar je makkelijk dingen in kunt omgooien/aanpassen om te kijken of 't je probleem verhelpt en je sluit meteen zaken uit die de oorzaak niet zijn door ze weg te laten (en als ze dat wel zijn kom je er gaandeweg het maken van de testcase achter en los je mogelijk zelf je probleem al op 
).
