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 : quentinduckit.com/illustration/psoriasis/) :
-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 :
$( document ).ready(function() {
$('#toleft').hide();
$(window).scroll(function() {
if ($(this).scrollLeft()) {
$('#toleft:hidden').stop(true, true).fadeIn();
} else {
$('#toleft').stop(true, true).fadeOut();
}
});
$('#toleft').click(function(){
$('body, html').animate({scrollLeft: 0}, 1500);
});
});
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).
Then I add a css style for this div "toleft", in my case it's looking like :
#toleft {
position: fixed;
right: 30px;
top: 650px;
z-index:9998;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
font-size: 13px;
font-weight: 200;
}
And finally I call this div in the index.php, on line 28, just before div "exhibit".
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 *** .
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 :
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 :
#hidetoleft {
position: fixed;
right: 25px;
top: 645px;
height: 30px;
width: 30px;
background-color: white;
z-index: 9999;
}
I call this div just before "toleft" in the index.php
<div id='hidetoleft'></div>
<div id='toleft'><<</div>
And I finally added a script at the end of index.php, just before the tag :
<script>
if (/illustration|shop/.test(window.location.href)) {
document.getElementById('hidetoleft').style.display = 'none';
}
</script>
</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 !