0
I have a gallery with horizontal scroll, I wonder if it is possible to put a click and drag to move the scroll, as if it were a touch dragging with the mouse.
Obs: the images will have link.
my gallery:
function mostra(theId){
var theArray= new Array('item1', 'item2', 'item3', 'item4', 'item5', 'item6');
for(i=0; i<theArray.length; i++){
if(theArray[i] == theId){
document.getElementById(theId).style.display='block';
}else{
document.getElementById(theArray[i]).style.display='none';
}
}
}
function exibe(theId){
var theArray= new Array('item-1', 'item-2', 'item-3', 'item-4', 'item-5', 'item-6');
for(i=0; i<theArray.length; i++){
if(theArray[i] == theId){
document.getElementById(theId).style.display='block';
}else{
document.getElementById(theArray[i]).style.display='none';
}
}
}
var SETTINGS = {
navBarTravelling: false,
navBarTravelDirection: "",
navBarTravelDistance: 150
}
var colours = {
0: "#00BFFF",
1: "#32CD32",
2: "#FF0000",
3: "#40FEFF",
4: "#14CC99",
5: "#00BAFF",
6: "#0082B2",
7: "#B25D7A",
8: "#00FF17",
9: "#006B49",
10: "#00B27A",
11: "#996B3D",
12: "#CC7014",
13: "#40FF8C",
14: "#FF3400",
15: "#ECBB5E",
16: "#ECBB0C",
17: "#B9D912",
18: "#253A93",
19: "#125FB9",
}
document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");
// the indicator
var indicador = document.getElementById("indicador");
var trilho = document.getElementById("trilho");
// Set the indicator
moveIndicator(trilho.querySelector("[aria-selected=\"true\"]"), colours[0]);
// Handle setting the currently active link
trilhoContents.addEventListener("click", function(e) {
var links = [].slice.call(document.querySelectorAll(".trilho_classe_Link"));
links.forEach(function(item) {
item.setAttribute("aria-selected", "false");
})
e.target.setAttribute("aria-selected", "true");
// Pass the clicked item and it's colour to the move indicator function
moveIndicator(e.target, colours[links.indexOf(e.target)]);
});
// var count = 0;
function moveIndicator(item, color) {
var textPosition = item.getBoundingClientRect();
var container = trilhoContents.getBoundingClientRect().left;
var distance = textPosition.left - container;
var scroll = trilhoContents.scrollLeft;
indicador.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
// count = count += 100;
// indicador.style.transform = "translateX(" + count + "px)";
if (color) {
indicador.style.backgroundColor = color;
}
}
function determineOverflow(content, container) {
var containerMetrics = container.getBoundingClientRect();
var containerMetricsRight = Math.floor(containerMetrics.right);
var containerMetricsLeft = Math.floor(containerMetrics.left);
var contentMetrics = content.getBoundingClientRect();
var contentMetricsRight = Math.floor(contentMetrics.right);
var contentMetricsLeft = Math.floor(contentMetrics.left);
if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
return "both";
} else if (contentMetricsLeft < containerMetricsLeft) {
return "left";
} else if (contentMetricsRight > containerMetricsRight) {
return "right";
} else {
return "none";
}
}
var indicador2 = document.getElementById("indicador2");
var trilho2 = document.getElementById("trilho2");
var colours2 = {
0: "#00BFFF",
1: "#32CD32",
2: "#FF0000",
3: "#40FEFF",
4: "#14CC99",
5: "#00BAFF",
6: "#0082B2",
7: "#B25D7A",
8: "#00FF17",
9: "#006B49",
10: "#00B27A",
11: "#996B3D",
12: "#CC7014",
13: "#40FF8C",
14: "#FF3400",
15: "#ECBB5E",
16: "#ECBB0C",
17: "#B9D912",
18: "#253A93",
19: "#125FB9",
}
// var count = 0;
function moveIndicator2(item, color) {
var textPosition = item.getBoundingClientRect();
var container = trilhoContents2.getBoundingClientRect().left;
var distance = textPosition.left - container;
var scroll = trilhoContents2.scrollLeft;
indicador2.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
// count = count += 100;
// indicador.style.transform = "translateX(" + count + "px)";
if (color) {
indicador2.style.backgroundColor = color;
}
}
// Set the indicator
moveIndicator2(trilho2.querySelector("[aria-selected=\"true\"]"), colours2[0]);
// Handle setting the currently active link
trilhoContents2.addEventListener("click", function(f) {
var links = [].slice.call(document.querySelectorAll(".trilho_classe_Link2"));
links.forEach(function(item) {
item.setAttribute("aria-selected", "false");
})
f.target.setAttribute("aria-selected", "true");
// Pass the clicked item and it's colour to the move indicator function
moveIndicator2(f.target, colours2[links.indexOf(f.target)]);
});* {
box-sizing: inherit;
}
.menu_horizontal {
position: relative;
/*padding: 0 11px;*/
box-sizing: border-box;
}
.trilho_classe {
/* Make this scrollable when needed */
overflow-x: auto;
/* We don't want vertical scrolling */
overflow-y: hidden;
/* For WebKit implementations, provide inertia scrolling */
-webkit-overflow-scrolling: touch;
/* We don't want internal inline elements to wrap */
white-space: nowrap;
/* If JS present, let's hide the default scrollbar */
.js & {
/* Make an auto-hiding scroller for the 3 people using a IE */
-ms-overflow-style: -ms-autohiding-scrollbar;
/* Remove the default scrollbar for WebKit implementations */
&::-webkit-scrollbar {
display: none;
}
}
/* positioning context for advancers */
position: relative;
/*Crush the whitespace here*/
font-size: 0;
}
.trilho_classe_Contents {
float: left;
transition: transform .2s ease-in-out;
position: relative;
}
.trilho_classe_Contents-no-transition {
transition: none;
}
.trilho_classe_Link {
text-decoration: none;
color: #888;
/*Reset the font size*/
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: inline-flex;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
& + & {
border-left-color: #eee;
}
&[aria-selected="true"] {
color: #111;
}
}
.trilho_classe_Indicator {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 100px;
background-color: transparent;
transform-origin: 0 0;
transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}
.trilho_classe_Link2 {
text-decoration: none;
color: #888;
/*Reset the font size*/
font-size: 1.2rem;
font-family: -apple-system, sans-serif;
display: inline-flex;
align-items: center;
min-height: 44px;
border: 1px solid transparent;
padding: 0 11px;
& + & {
border-left-color: #eee;
}
&[aria-selected="true"] {
color: #111;
}
}
#caixas{
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 10px;
}
#caixas2{
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 10px;
}
.conteudocaixas{
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.imagemcaixas{
margin-top: 5px;
width: 12.15%;
max-width: 170px;
height: auto;
display: inline-block;
}
.position_btcx{
display: inline-block;
margin: 6px 10px 0 0;
float: right;
}
.button_cx{
background: #fff;
height: 30px;
width: 30px;
border: 1px solid #000;
border-radius: 5px;
margin-right: 5px;
}
.caixa1{
/*margin: 0 0.5% 0 0.5%;*/
}
.caixa2{
/*margin: 0 0.5% 0 0.5%;*/
}
.logocx{
width: 130px;
height: 44px;
float: left;
display: -webkit-box;
background: #ddd;
padding: 15px;
}
.logocx img{
width: 15px;
}
.logocx p{
color: black;
font-size: 14px;
font-family: sans-serif;
margin-left: 5px;
margin-top: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="caixas">
<div class="caixa1">
<div class="menu_horizontal">
<nav id="trilho" class="trilho_classe">
<div id="trilhoContents" class="trilho_classe_Contents">
<a onclick="mostra('item1');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="true">Galeria1</a>
<a onclick="mostra('item2');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="false">Galeria2</a>
<a onclick="mostra('item3');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="false">Galeria3</a>
<span id="indicador" class="trilho_classe_Indicator" style="transform: translateX(0px) scaleX(0.965781); background-color: rgb(0, 191, 255);"></span>
</div>
<div class="position_btcx">
<button class="button_cx" type="button"><</button>
<button class="button_cx" type="button">></button>
</div>
</nav>
<div id="item1" style="display: block;">
<div class="conteudocaixas">
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
</div>
</div>
<div id="item2" style="display: none;">
<div class="conteudocaixas">
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
</div>
</div>
<div id="item3" style="display: none;">
<div class="conteudocaixas">
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
</div>
</div>
</div>
</div>
<div class="caixa1">
<div class="menu_horizontal">
<nav id="trilho2" class="trilho_classe">
<div id="trilhoContents2" class="trilho_classe_Contents">
<a onclick="exibe('item-1');" style="cursor: hand;" href="#" class="trilho_classe_Link2" aria-selected="true">Galeria1</a>
<a onclick="exibe('item-2');" style="cursor: hand;" href="#" class="trilho_classe_Link2">Galeria2</a>
<a onclick="exibe('item-3');" style="cursor: hand;" href="#" class="trilho_classe_Link2">Galeria3</a>
<span id="indicador2" class="trilho_classe_Indicator"></span>
</div>
<div class="position_btcx">
<button class="button_cx" type="button"><</button>
<button class="button_cx" type="button">></button>
</div>
</nav>
<div id="item-1" style="display:block;">
<div class="conteudocaixas">
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg" alt="#"/></a>
</div>
</div>
<div id="item-2" style="display:none;">
<div class="conteudocaixas">
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg" alt="#"/></a>
</div>
</div>
<div id="item-3" style="display:none;">
<div class="conteudocaixas">
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg" alt="#"/></a>
</div>
</div>
</div>
</div>
</div>
Sensational, I broke my head too much with it! Thank you very much!
– Arthur74
now my problem is the links that open when I drag the div
– Arthur74