Search code examples
javascriptjqueryhtmlhref

Setting next and previous href

I am facing some problem what i have now is there are images render in a div and and there anchor tag inside div when user clicks on image an overlay screen will open where i have to display pdf files i have used TouchPdf plugin now what i want is there will be arrows buttons on overlay screen which will navigate to next pdf file and displayed on overlay screen.I am getting difficulty in achieveing this Thanks All

this how images are rendered 

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <div class="image-div-conents">
       <h3 class="circle">BI</h3>
           <div  class="doc-name-date">
                  <!-- <ul class="list-inline"> -->
                       <span class="bill">Bill</span>
                           <span  class="bill">2-02-2017</span>
                            <!-- </ul> -->
                            </div>
                        </div>
                            <a  href="#">
                                <img  height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
                                <div class="validitity"><span>Validitity: Forever</span></div>
                            </a>
                    </div>


<div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <div class="image-div-conents">
       <h3 class="circle">BI</h3>
           <div  class="doc-name-date">
                  <!-- <ul class="list-inline"> -->
                       <span class="bill">Bill</span>
                           <span  class="bill">2-02-2017</span>
                            <!-- </ul> -->
                            </div>
                        </div>
                            <a  href="#">
                                <img  height="300px" class="img-responsive" src="http://i156.photobucket.com/albums/t20/warjhenz/1000x1000.gif" alt="">
                                <div class="validitity"><span>Validitity: Forever</span></div>
                            </a>
                    </div>

this will continue and images are rendered horizontally

What i have tried is--

Add click event 

$('.thumb a').on('click',function(){
 alert($(this).attr('href'));
 alert($(this).index());
});

but index is always 1 for each href as there are seprate div's and there is only anchor tag inside it.

Solution

  • You need to create a topmost parent element which has all the divs You can create a div

    <div class="parent> all your divs etc </div>

    $('.thumb a').on('click',function(){
 alert($(this).parentsUntil("thumb").index()); //Here the index will be the clicked index. 
});