• 4/16/2013
• 15562
• modalbox popup, jQuery popup, fancybox alternative, lightbox alternative, rudra softtech llp

An example to show slideshow inside modalbox popup.

Examples

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

Code

HTML

<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="" />
</div>

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

Script

<link href="slides.css" rel="Stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
    type="text/javascript"></script>
<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 });
    });
</script>
<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 () {
        $("#inline").modalbox({
            Type: 'inline',
            Width: 900,
            Height: 500
        });
    });
</script>

Share It

• Tweet