You must Sign In to post a response.
  • Category: JQuery

    Jquery lightbox next previous download option

    Please guide us how design model popup.
    "jquery model popup ("lightbox") next previous download option"
    here i want design model popup for showing images. with option next previous and download option in download option current image will download only.

    thank you.
  • #764886
    Hai Santosh,
    As the lightbox provides various options to show your image in the popup, you can still have the option to navigate the images by your custom code. You can get the current displayed image id and when the user click on previous button, get the previous image id and load the image. In the same way, you can get the next images.
    Hope it will be helpful to you.

    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)

  • #764921

    First have to download the required jQuery Library for this purpose.

    Below are the library names to be downloaded for this purpose and the respective URL for that,
    2. jquery.easing.1.3.js

    Now we will start the coding

    First Open a simple web application using your visual studio.

    Go to the webapplication root folder and create two folder named "Scripts" and "images" to save jQyery Library which we downloaded and to save the image we will be using in the application.

    Copy all the 3 jQuery library in your "Scripts" folder and all the images in your "images" Folder.

    Once this is done we will open our web application and copy below lines in your head section of the .aspx page.

    <head runat="server">
    <%--needs to download "jquery-1.6.4.min.js","jquery.easing.1.3.js" and jquery.cycle.all.js files from the net. Just search in google for this file directly --%>
    <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="Scripts/jquery.cycle.all.js" type="text/javascript"></script>
    <title>Sample jQuery Sliding Image Application</title>
    <script type="text/javascript">
    jQuery(document).ready(function ()
    if (jQuery('#SlideImages').length > 0)
    fx: 'curtainX', speed: 500, timeout: 5000, randomizeEffects: true, easing: 'easeInOutBounce',
    next: '.NextSlide',prev: '.PrevSlide',pager: '#SlideStyleNav',cleartypeNoBg: true
    <%--Prev.png and Next.png are the two small buttons to navigate next and prev on click ImageCount.png is the image count we display at the bottom of the page.--%>
    <style type="text/css">
    #SlideStyle .PrevSlide, #SlideStyle .NextSlide{display:block;position:absolute;width:40px;height:40px;top:150px;z-index:9999;text-decoration:none;}
    #SlideStyle .PrevSlide{left:0;background:transparent url(images/Prev.png) no-repeat top left;}
    #SlideStyle .NextSlide{right:0;background:transparent url(images/Next.png) no-repeat top left;}
    #SlideStyleNav {position:absolute; bottom:0; z-index:9999;}
    #SlideStyleNav a{background:transparent url(images/ImageCount.png) no-repeat 0 0 ; float:left; height:15px; overflow:hidden; text-decoration:none; text-indent:-1234px; width:16px;}
    #SlideStyleNav a.activeSlide {background-position:-32px 0;}
    #SlideImages{overflow: hidden; position: relative;}


    Now in your body tag add below code.

    <form id="form1" runat="server">
    <div id="SlideStyle">
    <div id="SlideImages">
    <%--Needs to add images in IMAGE folder, in this examle I have added 6 Images--%>
    <%--Image size can be changed depends on the size of image you are using, my code shrinks the image according to the size you are mentioning --%>
    <img src="images/1.jpg" alt="Image 1" width="400" height="300" />
    <img src="images/2.jpg" alt="Image 2" width="400" height="300" />
    <img src="images/3.jpg" alt="Image 3" width="400" height="300" />
    <img src="images/4.jpg" alt="Image 4" width="400" height="300" />
    <img src="images/5.jpg" alt="Image 5" width="400" height="300" />
    <img src="images/6.jpg" alt="Image 6" width="400" height="300" />
    <a class="PrevSlide" href="#"> </a>
    <a class="NextSlide" href="#"> </a>
    <div id="SlideStyleNav"> </div>

    Please refer my article for more details:

    Asheej T K

  • Sign In to post your comments