1

I have a horizontal thumbnail scroll bar on my webpage and I am using the code given here to scroll to a particular image in the thumbnail gallery. However, when I reload the page with F5, the gallery returns to the first image location. This becomes a problem since my thumbnail gallery has around 7500 images.

I have modified this code by adding an addEventListener to the window onload and retained the last clicked thumbnail as the index value in localStorage. On window onload, I am using the index to push the scroller to the last clicked image location. But it doesn;t work, nor i am getting any errors. The modified code is as follows:

<!DOCTYPE html>
<html>
<head>
  <style>
  li{display: table-cell; padding:20px;}
  ul{display: table-row; }
  .cont{overflow: auto;}
  li.active{border: 1px solid blue;}
  </style>
</head>
<body>
   <div class="book-list-headbox">
       <div class="page-number-box">
           <label for="" id="total-page" value="" class="mb-0"></label>
           <span class="separator">of</span>
           <input type="text" id="current-page" value="1">
       </div>
   </div>
   <div class="cont">
  <ul class="book-list" id="book-list">
        <li class="book active"><img src="http://via.placeholder.com/300x300/?text=1" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=2" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=3" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=4" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=5" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=6" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=7" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=8" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=9" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=11" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=12" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=13" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=14" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=15" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=16" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=17" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=18" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=19" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=20" alt="Book Page"></li>
  </ul>
</div>

  <div>another content</div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
  $(function(){
    $('#current-page').change(function() {
      var i = $(this).val() -1;
      activeBook(i);
      localStorage.setItem('clicki', i);

    });
    $('.book-list').on('click', '.book', function(){
      activeBook($(this).index());
    });

    function activeBook(i){
      $('.book').removeClass('active');
      var active = $('.book').eq(i).addClass('active');
      var left = active.position().left;
      var currScroll= $(".cont").scrollLeft(); 
      var contWidth = $('.cont').width()/2; 
      var activeOuterWidth = active.outerWidth()/2; 
      left= left + currScroll - contWidth + activeOuterWidth;


      $('.cont').animate( { 
        scrollLeft: left
      },'slow');
    }
  });

  window.addEventListener('load', function() {
    $(function(){
    $('#current-page').change(function() { //I tried changing this to onload function
      var clicki = localStorage.getItem('clicki');
      alert(clicki); //This alert also doesn't work.
      var i = clicki;
      activeBook(i);
    });
    $('.book-list').on('click', '.book', function(){
      activeBook($(this).index());
    });

    function activeBook(i){
      $('.book').removeClass('active');
      var active = $('.book').eq(i).addClass('active');
      var left = active.position().left;
      var currScroll= $(".cont").scrollLeft(); 
      var contWidth = $('.cont').width()/2; 
      var activeOuterWidth = active.outerWidth()/2; 
      left= left + currScroll - contWidth + activeOuterWidth;


      $('.cont').animate( { 
        scrollLeft: left
      },'slow');
    }
  });
  })

  </script>
</body>
</html>
Apricot
  • 2,925
  • 5
  • 42
  • 88

2 Answers2

1

You could do something like that:

  1. Set a variable on your onLoad listner and put 0 (the first photo) or your localStorage.getItem('clicki') if is > 0 (or true)

  2. Then use activeBook(clicki);.

Try it:

<!DOCTYPE html>
<html>
<head>
  <style>
  li{display: table-cell; padding:20px;}
  ul{display: table-row; }
  .cont{overflow: auto;}
  li.active{border: 1px solid blue;}
  </style>
</head>
<body>
   <div class="book-list-headbox">
       <div class="page-number-box">
           <label for="" id="total-page" value="" class="mb-0"></label>
           <span class="separator">of</span>
           <input type="text" id="current-page" value="1">
       </div>
   </div>
   <div class="cont">
  <ul class="book-list" id="book-list">
        <li class="book active"><img src="http://via.placeholder.com/300x300/?text=1" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=2" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=3" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=4" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=5" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=6" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=7" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=8" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=9" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=11" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=12" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=13" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=14" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=15" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=16" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=17" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=18" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=19" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=20" alt="Book Page"></li>
  </ul>
</div>

  <div>another content</div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>


  $(function(){

    $('#current-page').change(function() {
      setStorage($(this).val() -1)
    });


    $('.book-list').on('click', '.book', function(){
      setStorage($(this).index())
    });

  });

  window.addEventListener('load', function() {
      var clicki = (localStorage.getItem('clicki')) ? (localStorage.getItem('clicki')) : 0 ;
      // alert(clicki);
      activeBook(clicki);
  });


  function setStorage(myNum){
    localStorage.setItem('clicki', myNum);
    activeBook(myNum);
  }

  function activeBook(i){
    $('.book').removeClass('active');
    var active = $('.book').eq(i).addClass('active');
    var left = active.position().left;
    var currScroll= $(".cont").scrollLeft(); 
    var contWidth = $('.cont').width()/2; 
    var activeOuterWidth = active.outerWidth()/2; 
    left= left + currScroll - contWidth + activeOuterWidth;


    $('.cont').animate( { 
      scrollLeft: left
    },'slow');
  }

  </script>
</body>
</html>

PS: I created a function to set localStorage also when you click on img. Remove it, if it is not important for you.

ReSedano
  • 4,970
  • 2
  • 18
  • 31
1

Below code will satisfy your needs.

<!DOCTYPE html>
<html>
<head>
  <style>
  li{display: table-cell; padding:20px;}
  ul{display: table-row; }
  .cont{overflow: auto;}
  li.active{border: 1px solid blue;}
  </style>
</head>
<body>
   <div class="book-list-headbox">
       <div class="page-number-box">
           <label for="" id="total-page" value="" class="mb-0"></label>
           <span class="separator">of</span>
           <input type="text" id="current-page" value="1">
       </div>
   </div>
   <div class="cont">
  <ul class="book-list" id="book-list">
        <li class="book active"><img src="http://via.placeholder.com/300x300/?text=1" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=2" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=3" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=4" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=5" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=6" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=7" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=8" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=9" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=10" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=11" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=12" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=13" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=14" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=15" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=16" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=17" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=18" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=19" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=20" alt="Book Page"></li>
  </ul>
</div>

  <div>another content</div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
  $(function(){
    $('#current-page').change(function() {
      var i = $(this).val() -1;
      activeBook(i);
      localStorage.setItem('clicki', i);

    });
    $('.book-list').on('click', '.book', function(){
      activeBook($(this).index());
    });

    function activeBook(i){
      $('.book').removeClass('active');
      var active = $('.book').eq(i).addClass('active');
      var left = active.position().left;
      var currScroll= $(".cont").scrollLeft(); 
      var contWidth = $('.cont').width()/2; 
      var activeOuterWidth = active.outerWidth()/2; 
      left= left + currScroll - contWidth + activeOuterWidth;


      $('.cont').animate( { 
        scrollLeft: left
      },'slow');
    }
  });

  window.addEventListener('load', function() {
      var clicki = localStorage.getItem('clicki');
      var i = clicki;
      activeBook(i);

    $('.book-list').on('click', '.book', function(){
      activeBook($(this).index());
    });

    function activeBook(i){
        $('#current-page').val(i);
      $('.book').removeClass('active');
      var active = $('.book').eq(i).addClass('active');
      var left = active.position().left;
      var currScroll= $(".cont").scrollLeft(); 
      var contWidth = $('.cont').width()/2; 
      var activeOuterWidth = active.outerWidth()/2; 
      left= left + currScroll - contWidth + activeOuterWidth;


      $('.cont').animate( { 
        scrollLeft: left
      },'slow');
    }
  });

  </script>
</body>
</html>

I just changed your code to window load. So it triggers automatically when window load successfully. Tried to save this as one single html file and run in apache server you will get what you expected.

Selva
  • 546
  • 5
  • 12
  • 34