Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with image gallery counter

    Hello,
    I was wondering if someone could help me with adding an image counter to this
    gallery. Responsive Image Gallery
    something like image 2 of 16
    I'm guessing i have to tweak this file
    http://tympanus.net/Tutorials/Respon.../js/gallery.js
    I'm making my website responsive and like this gallery except I need a counter.
    Thanks

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just used another gallery
    Exposure - Demo 3

  • #3
    New Coder
    Join Date
    Aug 2010
    Location
    myeik
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 5 Posts
    Credit : Tympanus

    You can replace your image
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Responsive Image Gallery</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Responsive Image Gallery with jQuery" />
    <meta name="keywords" content="jquery, carousel, image gallery, slider, responsive, flexible, fluid, resize, css3" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="http://tympanus.net/favicon.ico">
    <link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/ResponsiveImageGallery/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/ResponsiveImageGallery/css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/ResponsiveImageGallery/css/elastislide.css" />
    <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
    <noscript>
    <style>
    .es-carousel ul{
    display:block;
    }
    </style>
    </noscript>
    <script type="text/javascript">
    //PLEASE DON'T ADD THIS TO YOUR SITE! PLEASE DOWNLOAD THE ZIP AND DON'T COPY THIS PAGE! THIS IS THE GOOGLE ANALYTICS TRACKING FOR CODROPS
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-7243260-2']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    </script>
    <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
    <div class="rg-image-wrapper">
    {{if itemsCount > 1}}
    <div class="rg-image-nav">
    <a href="#" class="rg-image-nav-prev">Previous Image</a>
    <a href="#" class="rg-image-nav-next">Next Image</a>
    </div>
    {{/if}}
    <div class="rg-image"></div>
    <div class="rg-loading"></div>
    <div class="rg-caption-wrapper">
    <div class="rg-caption" style="display:none;">
    <p></p>
    </div>
    </div>
    </div>
    </script>
    </head>
    <body>
    <div class="container">
    <div class="header">
    <a href="http://tympanus.net/Development/Elastislide/"><span>&laquo; Previous Demo: </span>Elastislide</a>
    <span class="right_ab">
    <a href="http://www.flickr.com/photos/smanography/" target="_blank">Images by Shermeee</a>
    <a href="http://creativecommons.org/licenses/by/2.0/deed.en_GB">CC BY 2.0</a>
    <a href="http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/"><strong>back to the Codrops post</strong></a>
    </span>
    <div class="clr"></div>
    </div><!-- header -->

    <div class="content">
    <h1>Responsive Image Gallery <span>A jQuery image gallery with a thumbnail carousel</span></h1>
    <div id="rg-gallery" class="rg-gallery">
    <div class="rg-thumbs">
    <!-- Elastislide Carousel Thumbnail Viewer -->
    <div class="es-carousel-wrapper">
    <div class="es-nav">
    <span class="es-nav-prev">Previous</span>
    <span class="es-nav-next">Next</span>
    </div>
    <div class="es-carousel">
    <ul>
    <li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/1.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>
    <li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/2.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></a></li>
    <li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/3.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/3.jpg" alt="image03" data-description="A plaintful story from a sistering vale" /></a></li>
    <li><a href="#"><img src="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/thumbs/4.jpg" data-large="http://tympanus.net/Tutorials/ResponsiveImageGallery/images/4.jpg" alt="image04" data-description="My spirits to attend this double voice accorded" /></a></li>

    </ul>
    </div>
    </div>
    <!-- End Elastislide Carousel Thumbnail Viewer -->
    </div><!-- rg-thumbs -->
    </div><!-- rg-gallery -->
    <p class="sub">Want more Shakespeare? <a href="http://www.opensourceshakespeare.org/" target="_blank">http://www.opensourceshakespeare.org/</a></p>
    </div><!-- content -->
    </div><!-- container -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/ResponsiveImageGallery/js/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/ResponsiveImageGallery/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/ResponsiveImageGallery/js/jquery.elastislide.js"></script>
    <script type="text/javascript" src="http://tympanus.net/Tutorials/ResponsiveImageGallery/js/gallery.js"></script>
    <script src="http://tympanus.net/codrops/adpacks/demoad.js"></script>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •