Index + Exhibit


Created by
Daniel Eatock
Jeffery Vaska
And You

Indexhibit was updated to version 2.1.5 on January 14th, 2018.

"go left" button


Indexhibit version: 2.0
Thread is resolved.

4 year(s) ago
Permalink Post

Hi there !

A friend of mine found me some script to add a kind of "go top" button, but for the horizontal plugin (so it's more like a "go left" button).
This button appears on the bottom right of the images when you start to scroll, and when you click on it, the images just slide to the left by theur own.
So far, everything's OK.
But there is just a little problem with it : the button appears even on the "over and over" plugin, which is not needed, but logical since we implemented the "toleft" div on the index.php.
Is there a way to implement this div just on the horizontal plugin, or put a php condition to display the go left button only when the plugin horizontal is on ?
Thanks in advance for your help, and sorry for my approximative english!

Oh and by the way, my website is :

Vaska A
4 year(s) ago
Permalink Post

Yes, just implement it into the format directly - format.horizontal.php.

4 year(s) ago
Permalink Post
Thanks Vaska for the quick answer !
I already tried to implement it on the horizontal.php, but I think I didn't place it on the right place, or did it wrong, because nothing worked.
Right now, the script is wrote on hscroll.js, and I placed a "toleft" div in my index.php.
Do i have to implement all of the script in horizontal.php or just the "toleft" div ?
I tried the second option already, writing :
$html .= "
4 year(s) ago
Permalink Post

Oops, my message didn't work.
So I tried to call the div with a $html on line 67, but it didn't work.

Vaska A
4 year(s) ago
Permalink Post

I don't know because I don't know about that script. Customizing requires some skill and knowledge of the code.

4 year(s) ago
Permalink Post

Yep I realized :-) (I'm not completly ignorant with some html or php though, I just try to learn by myself so it takes a lot if time and sometimes some help)
So, I was wondering if there is another way to do it. I mean, couldn't I just let things like they are now ("toleft" div called in index.php), but adding some php condition like "if format.horizontal.php is on (or true), display "toleft" div, else, don't display it", something like that ?
Thanks again for your help, if nothing is possible I will just forget it and go back to work :-)

Best Answer!
4 year(s) ago
Permalink Post

Ok I found a way to display the div with the go left button only where I wanted to display it, and for people who want to do the same, here is what I did
(here's an exemple on my website : :

-First, I added a script in a js file called "hscroll.js", which was already in use on my website to allow visitors to scroll horizontally using their mouse's scrollwheel.
The script I added is :

  1. $( document ).ready(function() {
  3.     $('#toleft').hide();
  4.     $(window).scroll(function() {
  5.         if ($(this).scrollLeft()) {
  6.             $('#toleft:hidden').stop(true, true).fadeIn();
  7.         } else {
  8.             $('#toleft').stop(true, true).fadeOut();
  9.         }
  10.     });
  12.     $('#toleft').click(function(){
  13.         $('body, html').animate({scrollLeft: 0}, 1500);
  14.     });


I put this script on line 19 of the existing hscroll.js file, between "function handle delta" and "function wheel event".
Basically, it means that you want to add a div which, by clicking on it, scroll to the left until the beginning of the window. You can adapt the speed changing the value "1500" in something else. Oh and this div is hidden when you load your gallery, and magically appears when you start to scroll to the right, which is just perfect.
(I have to say I didn't find it by myself, it's way beyond my poor skills in coding).

  1. Then I add a css style for this div "toleft", in my case it's looking like : 
  2. #toleft {
  4.     position: fixed; 
  5.     right: 30px; 
  6.     top: 650px; 
  7.     z-index:9998;
  8.     -webkit-touch-callout: none;
  9.     -webkit-user-select: none;
  10.     -khtml-user-select: none;
  11.     -moz-user-select: none;
  12.     -ms-user-select: none;
  13.     user-select: none;
  14.     cursor: pointer;
  15.     font-size: 13px;
  16.     font-weight: 200;
  18. }

And finally I call this div in the index.php, on line 28, just before div "exhibit".

  1. At this point, there was just one problem : the div "toleft" was display on every page of my website, and it was a big pain in my *** .
  2. As I said, I'm just a beginner in coding, so the only way I found to hide the div on my main page and other pages is pretty rough, but it's working :
  3. Since the "toleft" div is in position:fixed, then I could add a div at the same place, hidding "toleft" when I don't want it to be displayed. I found some interesting scripts on the web, allow me to hide or display a div, according to strings in the url. So I add a div in the style.css :
  4. #hidetoleft {
  6.     position: fixed;
  7.     right: 25px;
  8.     top: 645px;
  9.     height: 30px;
  10.     width: 30px;
  11.     background-color: white;
  12.     z-index: 9999;
  14. }

I call this div just before "toleft" in the index.php

  1. <div id='hidetoleft'></div>
  2. <div id='toleft'><<</div>

And I finally added a script at the end of index.php, just before the tag :

  1. <script>
  2. if (/illustration|shop/.test(window.location.href)) {
  3.     document.getElementById('hidetoleft').style.display = 'none';
  4. }
  5. </script>
  6. </body>

So, everytime the word "illustration" or "shop" appears on the url, the div hidding "toleft" isn't displayed. You just have to change this words to fit your case, and you're done !

Hoping it will helps !

Showing 1 - 7 of 7 posts in Forum » Customize » "go left" button

This thread has been closed, thank you.