WordPress.org

1. miruru
   Member
   Posted 3 years ago #

   Hi,

   I have a 3 column layout and on the third column, I currently have 11 thumbnail images. I would like to display 9 images on the home page with a more... link, then when the link is clicked, the 2 columns will remain the same (no change in data) but I want the third column to move from the first 9 images to the next page of the remaining number of images.

   Can this be achieved? The third column has been created as a second sidebar.

   Any more information you require, just ask.

2. Ben Sutcliffe
   Member
   Posted 3 years ago #

   The following would do this using Javascript which will work if you can insert the images yourself in to the tags. If you can't then you can use the same functions, you'll need to reprogram the script that writes out the images so that it puts the first 9 in to "images1" and the second set in to "images2".

   <div id="images1">
      <!-- My 9 images -->
   </div>
   <div id="images2" style="display:none;">
      <!-- The rest, by default display is none to hide on load -->
   </div>
   <div id="nav">
      <span id="more"><a href="#" onclick="page2()">More &raquo;</a></span>
      <span id="back" style="display:none;">
         <a href="#" onclick="page1()">&laquo; Back</a>
      </span>
   </div>
   <script type="text/javascript">
      // Changes image menu - brgs.me.uk
      function page2() {
         document.getElementById("images1").style.display = "none";
         document.getElementById("images2").style.display = "block";
         document.getElementById("more").style.display = "none";
         document.getElementById("back").style.display = "block";
      }
      function page1() {
         document.getElementById("images2").style.display = "none";
         document.getElementById("images1").style.display = "block";
         document.getElementById("back").style.display = "none";
         document.getElementById("more").style.display = "block";
      }
   </script>

   Alternatively you could pull the images through AJAX, but I can't code this out on here.

3. miruru
   Member
   Posted 2 years ago #

   ah, didn't know someone had replied. thank you so much. This has worked perfectly.

Topic Closed

This topic has been closed to new replies.