Galeria De Imagens Com Scroll Ao Passar O Mouse

betoweb · Dezembro 7, 2006

gente eu queria saber como faz... tipo esse do site www.mdshard.com

la em baixo tem a galeria de fotos que quando passa o mouse ele vai para o lado...se alguém puder me ajuda

agradecoo.

e-mail

borsatti_r2005@hotmail.com

.Andreia. · Dezembro 7, 2006

http://scriptbrasil.com.br/forum/index.php?showtopic=89704

betoweb · Dezembro 8, 2006

LA N TTEM NADA :///

Dezembro 10, 2006

gente la tem so que fala de cria uma mask e depois coloca dentro do menu...alguém pdoe explica isso?

nvGullit · Dezembro 13, 2006

pow galera eu também to querendo saber isso ai, ninguém vai ajudar não?

danyort · Dezembro 13, 2006

essa rolagem funciona porque eu testei o código:

http://scriptbrasil.com.br/forum/index.php...2&hl=iframe

Dezembro 16, 2006

dani eu n to entendendo aquele negocio de iframe coo que eu coloco as fotos ....n aparece nada quando coloca o codigo

Dezembro 18, 2006

o faz um teste então e menu dentro do mask ne

<div id=mask>
<div id=menu>
//bota as fotos todas aqui quantas você quiser
</div>
</div>

e codigo do movimeto esquera direita onde você quise(dentro do body¬¬) pode ser do jeito que está

pega a div mask espande dexa ela grande, e deixa as fotos todas 50w por 50h dai se vai vê que aparece

:P

babaloricha · Dezembro 18, 2006

o post ^ e meu (grande b*** hahahah)

|

esquci de loga

Dezembro 19, 2006

assim ?

</script>

</div></div>

Dezembro 19, 2006

desse jeito n deu n ^!!

danyort · Dezembro 19, 2006

você vai ter que criar um outro html onde ficarão as fotos.

E no arquivo que vai ter a rolagem, você chama esse html com as fotos através do iframe:

<iframe src="fotos.htm" width="117" height="100%" name="pri2" frameborder="no" align="center" scrolling=no></iframe>

babaloricha · Dezembro 20, 2006

o você nomeou o layer de mask e outro de menu?

tipo #mask{................}

# menu{.............}

da uma o olhada no meu codigo , está um pouco diferente mas a parte do layer e igual e o evento e on click

mas acho que vai te ajuda! :lol:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#mask{
    position:absolute;
    width:471px;
    height:160px;
    z-index:1;
    left: 277px;
    top: 272px;
    overflow:hidden;
    background-color:#6666FF;
}
#menu{
    position:absolute;
    width:604px;
    height:87px;
    z-index:2;
    left: -66px;
    top: 37px;
    overflow:visible;
}
-->
</style>
</head>
<script language="JavaScript">
var velo_scroll = 20; // velocidade da rolagem
var pixel_scroll = 10; // quantidade de saltos entre os pixels
var window_width = 400; 
var isNav;
var isIE;
var coll = "";
var styleObj = "";
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true;
} else {
isIE = true;
coll = "all.";
styleObj = ".style";
}
}

function getObjWidth(obj) {
var theObj = eval("document." + coll + obj);
if (isNav) {
return theObj.clip.width;
} else {
return theObj.clientWidth;
}
}

function getObject(obj) {
if (typeof obj == "string") {
theObj = eval("document." + coll + obj + styleObj);
} else {
theObj = obj;
}
return theObj;
}

function getInsideWindowWidth() {
if (isNav) {
return window.innerWidth;
} else {
return document.body.clientWidth;
}
}

function getObjectLeft(obj) {
var theObj = getObject(obj);
if (isNav) {
return theObj.left;
} else {
return theObj.pixelLeft;
}
}

function shiftBy(obj, x, y) {
var theObj = getObject(obj);
if (isNav) {
theObj.left = theObj.left + x;
theObj.top = theObj.top + y;
} else {
theObj.pixelLeft = theObj.pixelLeft + x;
theObj.pixelTop = theObj.pixelTop + y;
}
}

var tim = 0;
var noScroll = true;

function mLeft(obj) {
obj = "menu"
if(!noScroll && getObjectLeft(obj) < window_width) {
shiftBy(obj, pixel_scroll, 0);
tim = setTimeout("mLeft()", velo_scroll);
}
}

function mRight(obj) {
obj = "menu"
if(!noScroll && getObjectLeft(obj) > -(getObjWidth(obj) - (getInsideWindowWidth())) - window_width) {
shiftBy(obj, -pixel_scroll, 0);
tim = setTimeout("mRight()", velo_scroll);
}
}

function noMove() {
clearTimeout(tim);
noScroll = true;
}
f1 = new Image(432,364);// aqui você coloca a foto da sua escolha  o(432,364 e o tamanho)
f1.src = "f1.JPG";
f2= new Image(432,364)
f2.src = "f2.JPG";
f3= new Image(432,364)
f3.src = "f3.JPG";
f4= new Image(432,364)
f4.src = "f4.JPG";
f5= new Image(432,364)
f5.src = "f5.JPG";
f6= new Image(432,364)
f6.src = "f6.JPG";
</script>


<body>
<div id="mask">
    <div id="menu">
    <img src="f1.JPG" height="100" width="100" onclick="window.document['foto'].src = f21.src"/>
    <img src="f2.JPG" height="100" width="100" onclick="window.document['foto'].src = f2.src" />
    <img src="f3.JPG" height="100" width="100" onclick="window.document['foto'].src = f3.src"/>
    <img src="f4.JPG" height="100" width="100" onclick="window.document['foto'].src = f4.src"/>
    <img src="f5.JPG" height="100" width="100" onclick="window.document['foto'].src = f5.src"/>
    <img src="f6.JPG" height="100" width="100" onclick="window.document['foto'].src = f6.src"/>        </div>
</div>
<p><a href="#" onmouseover="noScroll=false; mLeft('menu')" onmouseout="noMove()">Esquerda</a>
    <a href="#" onMouseOver="noScroll=false; mRight('menu')" onMouseOut="noMove()">Direita</a></p>
<p><img src="f1.JPG" width="432" height="364" name="foto"/></p>
</body>
</html>

da uma olhada ai!!

C@rimbeiro · Dezembro 20, 2006

Aqui esta o código pra você montar essa galeria de imagens.

Estou lhe mandando o código para 2 arquivos, é só você alterar as imagens e pronto!

vai funcionar belezinha.

--------

fotos.html

------------

<html>

<head>

<title>GALERIA DE IMAGENS</title>

<style>

img{

border: 1px solid white;

}

</style>

</head>

</div>

</body>

</html>

----------

motiongallery.js

--------------------

var restarea=0

var maxspeed=7

var endofgallerymsg=""

var iedom=document.all||document.getElementById

var scrollspeed=0

var movestate=""

var actualwidth=''

var cross_scroll, ns_scroll

var loadedyes=0

function ietruebody(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function creatediv(){

statusdiv=document.createElement("div")

statusdiv.setAttribute("id","statusdiv")

document.body.appendChild(statusdiv)

statusdiv=document.getElementById("statusdiv")

statusdiv.innerHTML=endofgallerymsg

}

function positiondiv(){

menuheight=parseInt(crossmain.offsetHeight)

mainobjoffsetH=getposOffset(crossmain, "top")

statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"

statusdiv.style.top=menuheight+mainobjoffsetH+"px"

}

function showhidediv(what){

if (endofgallerymsg!="")

statusdiv.style.visibility=what

}

function getposOffset(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

}

function moveleft(){

if (loadedyes){

movestate="left"

if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){

cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"

showhidediv("hidden")

}

else

showhidediv("visible")

}

lefttime=setTimeout("moveleft()",10)

}

function moveright(){

if (loadedyes){

movestate="right"

if (iedom&&parseInt(cross_scroll.style.left)<0){

cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"

showhidediv("hidden")

}

else

showhidediv("visible")

}

righttime=setTimeout("moveright()",10)

}

function motionengine(e){

var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;

var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;

var curposy=window.event? event.clientX : e.clientX? e.clientX: ""

curposy-=mainobjoffset-dsocx

var leftbound=(menuwidth-restarea)/2

var rightbound=(menuwidth+restarea)/2

if (curposy>rightbound){

scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed

if (window.righttime) clearTimeout(righttime)

if (movestate!="left") moveleft()

}

else if (curposy<leftbound){

scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed

if (window.lefttime) clearTimeout(lefttime)

if (movestate!="right") moveright()

}

else

scrollspeed=0

}

function contains_ns6(a, B) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}

function stopmotion(e){

if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){

if (window.lefttime) clearTimeout(lefttime)

if (window.righttime) clearTimeout(righttime)

movestate=""

}

function fillup(){

if (iedom){

crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer

menuwidth=parseInt(crossmain.style.width)

mainobjoffset=getposOffset(crossmain, "left")

cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery

actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth

crossmain.onmousemove=function(e){

motionengine(e)

}

crossmain.onmouseout=function(e){

stopmotion(e)

showhidediv("hidden")

}

loadedyes=1

if (endofgallerymsg!=""){

creatediv()

positiondiv()

}

window.onload=fillup

PRONTO É PRA FUNCIONAR

até + :ph34r:

Dezembro 20, 2006

GENTE O MEU FUNFO SO que EU QUERIA NA VERTICAL E ELE está NA HORIZONTAL

babaloricha · Dezembro 21, 2006

qual exemplo você uso?

oque eu postei ou o do carimbeiro?

Entrar

Galeria De Imagens Com Scroll Ao Passar O Mouse

Pergunta

Link para o comentário

Compartilhar em outros sites

15 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest - rodrigo -

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest betoweb

Link para o comentário

Compartilhar em outros sites

Guest Visitante

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest - web -

Link para o comentário

Compartilhar em outros sites

Guest - web -

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest BETOWEB

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns