I have been working on developing my own jQuery Gallery Plugin. The crucial initial markup that is required to initialize the plugin includes:
Initial HTML
<div class="riGallery">
<ul>
<li><a href="http://www.example.com"><img src="img/gallery-img-1.jpg" alt="Description 1"></a></li>
<li><a href="http://www.example.com"><img src="img/gallery-img-2.jpg" alt="Description 2"></a></li>
<li><a href="http://www.example.com"><img src="img/gallery-img-3.jpg" alt="Description 3"></a></li>
</ul>
</div>
Upon calling the plugin, it dynamically inserts the additional necessary HTML for the plugin to function properly.
Updated HTML Structure
<div class="rigallery">
<div class="ri-display">
<a href="http://www.example.com"><img src="img/gallery-img-1.jpg" alt="Description 1"></a>
<button class="ri-prev" href="http://example.com"><</button>
<button class="ri-next">></button>
</div>
<ul>
<li><a href="http://www.example.com"><img src="img/gallery-img-1.jpg" alt="Description 1"></a></li>
<li><a href="http://www.example.com"><img src="img/gallery-img-2.jpg" alt="Description 2"></a></li>
<li><a href="http://www.example.com"><img src="img/gallery-img-3.jpg" alt="Description 3"></a></li>
</ul>
</div>
Although I have meticulously set up all the CSS styles in an external stylesheet, the newly created elements do not inherit the styles as expected. The stylesheet is correctly linked to the HTML page where the plugin resides, and I am activating the plugin only after the document has fully loaded...
Plugin Activation Script
<script>
$(function() {
$(".riGallery").riGallery({
thumbWidth: 100,
thumbHeight: 100
});
});
</script>
I need guidance on how to ensure that the CSS rules from the stylesheet are applied to the dynamically generated elements?