How to use slideshow with modalbox jquery popup

An example to show slideshow inside modalbox popup.


A slideshow same as the one below will be shown inside modal popup. Click "Enlarge SlideShow" button.



<div id="slideshow" class="rst-slides" style="height: 100%; display:none; width: 100%;">
    <img class="rst-slide" src="pic1.jpg"
        alt="" />
    <img class="rst-slide" src="pic2.jpg"
        alt="" />
    <img class="rst-slide" src="pic3.jpg"
        alt="" />
    <img class="rst-slide" src="pic4.jpg"
        alt="" />
    <img class="rst-slide" src="pic5.jpg"
        alt="" />
    <img class="rst-slide" src="pic6.jpg"
        alt="" />
    <img class="rst-slide" src="pic7.jpg"
        alt="" />
    <img class="rst-slide" src="pic8.jpg"
        alt="" />
    <img class="rst-slide" src="pic9.jpg"
        alt="" />
    <img class="rst-slide" src="pic10.jpg"
        alt="" />

<a href="#slideshow" id="inline" class="btn btn-large btn-info">Enlarge SlideShow</a>


<link href="slides.css" rel="Stylesheet" />
<script src=""
<script src="slides.js" type="text/javascript"></script>
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function () {
        $(".rst-slides").slides({ Circular: true, AdjustHeight: false });
<link href="modal.css" rel="Stylesheet" />
<link href="modal-darktheme.css" id="modaltheme"
    rel="Stylesheet" />
<script src="modal.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
            Type: 'inline',
            Width: 900,
            Height: 500
License & Download ModalBox
Subscribe for our monthly newsletter for updated articles and useful code scripts.

Share It

comments powered by Disqus