Menu de imagens deslizante!!!

cybernetico

cybernetico

Power Member
Boas pessoal,
Eu tou a tentar colocar as fotos, da galeria de imagens, onde se clica para se ver em grande lado a lado e de forma a deslizarem quando o rato chega ao fim do ecrã, tanto para um lado como para o outro mas não tou a conseguir :(

Em anexo segue um link do k pretendo.
Quem me puder ajudar agradeço.
Abraços.

http://www.browniethoughts.com/2013/03/gallerie-gallery-image-viewer-jquery-plugin.html

Aqui seguem as linhas de código feitas por mim:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Galeria de Fotos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$('a').click(function(e){
$('#rolagem').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top + $('#rolagem').scrollTop()
}, 500);
return false;

});
});
</script>
<style type="text/css">
body{
margin: 0px;
background-color: #000;
color: #FFFFFF;
}
#rolagem{
height:720px;
margin-bottom:10px;
width: auto;
margin-left:auto;
margin-right:auto;
text-align:center;
overflow: hidden;
}
.caixa-miniatura{
border: 1px solid #999;
width: 100px;
display:inline-block;
margin-left: 2px;
margin-right: 2px;
padding: 0px;
overflow: hidden;
height: 57px;
}
#miniaturas{
text-align:center;
position: fixed;
bottom: 0px;
margin-left: auto;
margin-right: auto;
left: 0px;
right: 0px;
border-top: thin solid #757575;
padding-top:10px;
padding-bottom: 10px;
background-color: #000000;
}
</style>
</head>
<body>

<audio src="Roxette - Listen To Your Heart.mp3" autoplay loop></audio>

<div id="rolagem">
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6839.JPG" name="img1" width="1280" height="720" id="img1" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6840.JPG" name="img2" width="1280" height="720" id="img2" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6841.JPG" name="img3" width="1280" height="720" id="img3" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6842.JPG" name="img4" width="1280" height="720" id="img4" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6843.JPG" name="img5" width="1280" height="720" id="img5" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6844.JPG" name="img6" width="1280" height="720" id="img6" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6845.JPG" name="img7" width="1280" height="720" id="img7" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6846.JPG" name="img8" width="1280" height="720" id="img8" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6847.JPG" name="img9" width="1280" height="720" id="img9" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6848.JPG" name="img10" width="1280" height="720" id="img10" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6849.JPG" name="img11" width="1280" height="720" id="img11" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6850.JPG" name="img12" width="1280" height="720" id="img12" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6851.JPG" name="img13" width="1280" height="720" id="img13" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6852.JPG" name="img14" width="1280" height="720" id="img14" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6853.JPG" name="img15" width="1280" height="720" id="img15" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6854.JPG" name="img16" width="1280" height="720" id="img16" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6855.JPG" name="img17" width="1280" height="720" id="img17" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6856.JPG" name="img18" width="1280" height="720" id="img18" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6857.JPG" name="img19" width="1280" height="720" id="img19" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6858.JPG" name="img20" width="1280" height="720" id="img20" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6859.JPG" name="img21" width="1280" height="720" id="img21" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6860.JPG" name="img22" width="1280" height="720" id="img22" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6861.JPG" name="img23" width="1280" height="720" id="img23" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6862.JPG" name="img24" width="1280" height="720" id="img24" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6863.JPG" name="img25" width="1280" height="720" id="img25" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6864.JPG" name="img26" width="1280" height="720" id="img26" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6865.JPG" name="img27" width="1280" height="720" id="img27" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6866.JPG" name="img28" width="1280" height="720" id="img28" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6867.JPG" name="img29" width="1280" height="720" id="img29" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6868.JPG" name="img30" width="1280" height="720" id="img30" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6869.JPG" name="img31" width="1280" height="720" id="img31" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6870.JPG" name="img32" width="1280" height="720" id="img32" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6871.JPG" name="img33" width="1280" height="720" id="img33" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6872.JPG" name="img34" width="1280" height="720" id="img34" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6873.JPG" name="img35" width="1280" height="720" id="img35" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6874.JPG" name="img36" width="1280" height="720" id="img36" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6875.JPG" name="img37" width="1280" height="720" id="img37" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6876.JPG" name="img38" width="1280" height="720" id="img38" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6877.JPG" name="img39" width="1280" height="720" id="img39" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6878.JPG" name="img40" width="1280" height="720" id="img40" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6879.JPG" name="img41" width="1280" height="720" id="img41" />
<img src="Uma grande amizade - fotos/07-06-2017/DSCF6880.JPG" name="img42" width="1280" height="720" id="img42" />
</div>

<div id="caixa-miniatura">
<div class="caixa-miniatura"><a href="#img1"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6839low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img2"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6840low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img3"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6841low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img4"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6842low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img5"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6843low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img6"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6844low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img7"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6845low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img8"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6846low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img9"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6847low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img10"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6848low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img11"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6849low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img12"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6850low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img13"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6851low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img14"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6852low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img15"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6853low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img16"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6854low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img17"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6855low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img18"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6856low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img19"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6857low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img20"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6858low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img21"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6859low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img22"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6860low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img23"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6861low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img24"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6862low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img25"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6863low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img26"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6864low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img27"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6865low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img28"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6866low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img29"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6867low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img30"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6868low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img31"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6869low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img32"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6870low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img33"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6871low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img34"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6872low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img35"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6873low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img36"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6874low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img37"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6875low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img38"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6876low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img39"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6877low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img40"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6878low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img41"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6879low.jpg" width="100" height="57" /></a></div>
<div class="caixa-miniatura"><a href="#img42"><img src="Uma grande amizade - fotos/07-06-2017/DSCF6880low.jpg" width="100" height="57" /></a></div>
</div>
</body>
</HTML>


CSS

html,
body {
width: 100%;
height: 100%;
}
body {
-ms-flex-wrap: no-wrap;
flex-wrap: no-wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.container {
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-perspective: 1000;
perspective: 1000;
position: relative;
}
.map {
width: 200px;
height: 300px;
margin: 0 -25px;
position: relative;
box-shadow: 0px 0px 110px -5px rgba(0, 0, 0, 0.5);
background-size: cover;
background-position: center;
border-radius: 5px;
-webkit-transition: .2s;
transition: .2s;
cursor: pointer;
}
.map:hover {
-webkit-transition: .2s;
transition: .2s;
-webkit-transform: translateZ(5px) translateY(-20px) scale(1.05);
transform: translateZ(5px) translateY(-20px) scale(1.05);
}
.map-1,
.map-4 {
-webkit-transform: translateZ(1px);
transform: translateZ(1px);
}
.map-2,
.map-5 {
-webkit-transform: translateZ(2px) translateY(-5px);
transform: translateZ(2px) translateY(-5px);
}
.map-3 {
-webkit-transform: translateZ(3px) translateY(-10px);
transform: translateZ(3px) translateY(-10px);
}
.map-1:hover ~ .map-2 {
-webkit-transform: translateZ(4px) translateY(-15px);
transform: translateZ(4px) translateY(-15px);
-webkit-transition: .2s;
transition: .2s;
}
.map-4 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.map-4:hover ~ .map-5 {
-webkit-transform: translateZ(3px) translateY(-15px);
transform: translateZ(3px) translateY(-15px);
-webkit-transition: .1s;
transition: .1s;
}
.shelf {

height: 100px;
width: 100%;
position: absolute;
bottom: -75px;
left: 0;
-webkit-transform: translateZ(10px);
transform: translateZ(10px);
}
.map a {
display: block;
width: 100%;
height: 100%;
}

Obrigado mais uma vez.
 
Última edição:
Boas pessoal...
desculpem a insistência mas isto é para um trabalho final de curso, se me puderem dar uma ajudinha agradecia :)

Obrigado e abraço a todos.
 
o código apresentado está cheio de links locais e bibliotecas externas, talvez tenhas mais respostas se fizeres um test case mais simples ou usares o codepen.
 
Última edição:
na boa, um test case bem escrito permite a qualquer utilizador executar o teste e perceber o problema. Se eu fizer copy paste do código vai-me dar logo erro de biblioteca não encontrada e várias imagens com erro.

Um site que pode ajudar é o http://placeholder.com para criar links de imagens temporárias.

O http://codepen.io permite criar exemplos de código HTML, CSS e Javascript executáveis na cloud em que se vê logo o resultado.

Tutorial Codepen

e talvez haja outros sites parecidos
 
Última edição:
Inicie sessão ou registe-se para poder participar.
Back
Topo