Incorporating the flexslider widget for displaying a photo gallery has been quite straightforward. The markup is simple and adjusts seamlessly to the viewport upon document load, with styling applied once the document is ready. Initially, everything functions as expected when the page loads. However, there arises a need for a "selector" feature where clicking on a link triggers the loading of a new gallery within the flexslider widget.
To achieve this, I utilized jQuery to select the corresponding gallery div and update its contents using `$("#galleryID").empty().append(new-markup);`. While this updates the DOM structure accordingly, the issue arises when the flexslider fails to display the new content due to the necessity of running the script that adapts it to the viewport and styles it. Despite attempts to rerun the necessary script post-modification, the div remains empty. Interestingly, invoking the same script from the console results in the correct display of the div.
My current approach involves utilizing the $.getScript() method in jQuery to reload the adaptation and styling script. Yet, this solution is inconsistent - sometimes it works, but other times it does not. Surprisingly, Firefox consistently executes the scripts and displays the gallery correctly upon selecting the selector. On the other hand, Chrome proves unreliable, occasionally rendering the div blank despite having the correct markup sans the required modifications.
<script type='text/javascript'>
$('a.pgal').click(function () {
var id = $(this).attr('hashtag');
/*fetch gallery elements (images, titles, etc)*/
$.get("listgal.php", {hashtag:id}, function(objetogal){
// code snippet
}, "json");
$.getScript("js/renueva.js", function(){
});
return false;
});
</script>
The additional script 'renueva.js' encompasses the essential code responsible for styling and adapting the gallery to the viewport using the provided markup source. Previous attempts to include this code within the same script post-refresh proved futile, as it failed to produce any visible changes. Performing the same action via the console yielded positive results. Presently, experimenting with $.getScript exhibits varying outcomes – at times, processing the markup successfully, while at others failing to do so when using Chrome. In contrast, Firefox consistently executes without issues.
// Flexslider initialization
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 90,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
}
});
Below is the HTML markup:
<div class="col-xs-12 w12 col-md-9" id="galeriabr">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="fotos/armas.jpg" />
<p class="flex-caption">Se presentan 98 delitos al día en Michoacán</p>
</li>
<li>
<img src="fotos/sep.jpg" />
<p class="flex-caption">Se tomarán medidas para garantizar evaluación a maestros: SEP</p>
</li>
<li>
<img src="fotos/eleccion.jpg" />
<p class="flex-caption">Scioli gana elección de Argentina pero puede haber segunda vuelta</p>
</li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="fotos/armas.jpg" />
</li>
<li>
<img src="fotos/sep.jpg" />
</li>
<li>
<img src="fotos/eleccion.jpg" />
</li>
</ul>
</div>
</div>