[Javascript] Image uitrollen van links naar rechts

[Urk]

Ik weet dat een scriptrequest niet mag. Maar toch de volgende vraag...

Ik wil als iemand op een tumbnail image klikt dat hij in groot formaat (beschikbaar) met een lijn wordt uitgerold naar rechts.
Natuurlijk is dit moeilijk onder woorden te brengen, daarom hier (link removed) een soortgelijk iets in Flash.
Direct wat je als eerste ziet bedoel ik eigenlijk. Het image is dus eerst wit en zodra de lijn naar (in het voorbeeld) beneden scrollt wordt het image zichtbaar.
Dit zoek ik eigenlijk in Javascript/DHTML.
Ik heb al via Google, de GoT search, Hotscripts gezocht maar helaas niet gevonden. Wel iets soortgelijks half kunnen maken maar dan schuift de image achter de lijn aan.

Heeft iemand zo'n script ergens wel eens gezien of kan mij op weg helpen dit te doen met JS en XHTML?
Het moet trouwens wel Cross-Browser werken, in ieder geval in IE, FF en liefst ook Safari voor MacOS X.

Ik hoop dat iemand mij kan helpen...

[ Voor 4% gewijzigd door Urk op 22-07-2005 14:33 ]

[RobIII]

Knal een DIV over de image en move die gewoon naar rechts/links/boven/beneden whatever zodat de "Image" verschijnt Geef die div aan 1 kant een border en als background-color de achtergrondkleur van je pagina. Met een beetje CSS en JS kom je makkelijk aan dit resultaat, maar je moet er wel wat moeite voor (willen) doen

We gaan hier niks (lees: code) voorkauwen. Als je met wat code zou komen die je had geprobeerd zouden we je hier wél kunnen (lees: willen) helpen om je probleem op te lossen. Dus kom maar op met je code

[ Voor 78% gewijzigd door RobIII op 21-07-2005 19:02 ]

[Urk]

Ik had de volgende code, ergens vandaan gehaald, beetje aangepast, maar zowieso is dit niet helemaal de bedoeling. Het image gaat namelijk achter de lijn aan, het plaatje mag niet bewegen, alleen de lijn. Ook lukte het niet om hem i.p.v. vanaf bovenaf vanaf links naar rechts te scrollen

[luie mode]En waarom opnieuw een script maken als er wellicht al iets soortgelijks bestaat?[/luie mode]

code:

<script language="JavaScript1.2">

//Drop-in slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width='380px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
var slideshow_height='390px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var dropimages=new Array()
dropimages[0]="volenergie_voorkant_groot.jpg"
dropimages[1]="nieuwklassiek_voorkant_groot.jpg"
dropimages[2]="makeup_voorkant_groot.jpg"


var preloadedimages=new Array()
for (p=0;p<dropimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=dropimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>')
else
document.write('[img]"'+dropimages[0]+'"[/img]')

var curpos=parseInt(slideshow_height)*(-1)
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function movepic(){
if (curpos<0){
curpos=Math.min(curpos+degree,2)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='[img]"'+dropimages[nextimageindex]+'"><div[/img]</div>'
nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("movepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=dropimages[curimageindex]
curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=parseInt(slideshow_height)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='[img]"'+dropimages[curimageindex]+'"><div[/img]</div>'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>

[André]

Het script wat hierboven staat is onbruikbaar vanwege enorme stukken ranzige code. Als ik jou was zou ik toch echt zelf iets proberen. Het is heel simpel door een gewoon een plaatje in een div te zetten en daarna de clip eigenschappen van de div aan te passen. Vervolgens geef je de div een border-bottom en voila, klaar ben je.

Ook kan het gewoon met het aanpassen van de height van de div icm met overflow hidden

[ Voor 13% gewijzigd door André op 21-07-2005 19:33 ]

[Urk]

André: Thanks! Ik ben dus niet de enige die de bovenstaande code niet echt begrijpt. Ik snapte er al helemaal niks van, en volgens mij is de helft van de regels overbodig...

Ik heb ook even zitten nadenken hoe ik dit dan zelf kan maken.
Ik denk inderdaad een DIV, net zo groot als de image, met een witte achtergrond en een linker oranje border van 3px.
Dat hele vlak dient vervolgens vloeiend naar rechts te schuiven, en met een hoge z-index zorg ik ervoor dat hij boven het image blijft. Simpelgezegd maar wel correct, toch?

Wat bedoel je trouwens verder met: "Ook kan het gewoon met het aanpassen van de height van de div icm met overflow hidden"
Heb je een kort voorbeeld hoe je dit bedoelt?

Wederom

[Urk]

Jaja! Ik ben al een aardig eind! Ik heb nu de volgende code...

code:

[...]
<td width="410" style="padding-right: 5px; text-align: right; vertical-align: bottom;">
 <div style="position: relative; width: 380px; height: 380px; z-index: 2;">
  <div style="position: absolute; z-index: 5;">[img]"test_voorkant_groot.jpg"[/img]</div>
  <div id="orange_line" style="position: relative; left: 20px; width: 380px; height: 380px; background-color: #FFFFFF; border-left: 3px solid #FF9900; z-index: 10;"></div>
 </div>
</td>
[...]

<script language="JavaScript" type="text/javascript">
function moveLine() {
 document.getElementById('orange_line').style.left = document.getElementById('orange_line').offsetLeft + 10
}

while (document.getElementById('orange_line').offsetLeft < 380) {
 //alert(document.getElementById('orange_line').offsetLeft);
 setTimeout("moveLine()", 100)
}
</script>

Het enige waar ik nu niet meer uitkom is hoe ik dit over een paar seconden kan lopen, als ik er namelijk geen setTimeout inzet staat hij gelijk goed en zie je dus niks verschuifen...
Ik dacht dus gebruik maken van setTimeout.
Vanuit de setTimeout roep ik nu een functie aan die het bovenste divje 10 pixels naar rechts verschuift.
Maar dit werkt niet...

Wat is de juiste methode om dit te doen?
Als ik die alert activeer zie ik het image iedere keer 10 pixels verschuiven...

Deze code heb ik trouwens helemaal zelf geschreven...
Ik kom echt niet meer verder...

[André]

code:

<div id="orange_line" style="position: relative; width: 0px; height: 380px; overflow: hidden; border-right: 5px solid orange;">
  <img src="minibike.jpg" id="uitvergroting" name="uitvergroting" border="0" alt="" />
</div>
<script type="text/javascript">
  obj = document.getElementById("orange_line");
  function moveLine()
  {
    w = parseInt(obj.style.width);
    obj.style.width = (w + 10) + "px";
    if (w < 380) { setTimeout("moveLine()", 50); }
  }
  moveLine();
</script>

Trouwens, om de animatie te boosten en soepeler te laten lijken kun je het ook als volgt doen:

code:

<div id="orange_line" style="position: relative; width: 0px; height: 380px; overflow: hidden; border-right: 5px solid orange;">
  <img src="minibike.jpg" id="uitvergroting" name="uitvergroting" border="0" alt="" />
</div>
<script type="text/javascript">
  obj = document.getElementById("orange_line");
  function moveLine()
  {
    w = parseInt(obj.style.width);
    obj.style.width = (w + 1) + "px";
  }

  for (var i = 0; i < 370; i++)
  {
    setTimeout("moveLine()", i * 2);
  }
</script>

Eventueel met een grotere stap of langere timeout

[ Voor 42% gewijzigd door André op 21-07-2005 21:27 ]

[Urk]

Thanks André! Je bent geweldig! Enne, nee hoor, dat is niet slijmen
Je eerste script heb ik iets aangepast, i.p.v. width heb ik offsetLeft en left gebruikt, zie de code hieronder:

code:

<div style="position: relative; width: 380px; height: 380px; z-index: 2;">
 <div style="position: absolute; z-index: 5;">[img]"voorkant_groot.jpg"[/img]</div>
 <div id="orange_line" style="position: relative; left: 0px; width: 380px; height: 380px; background-color: #FFFFFF; border-left: 4px solid #FF9900; z-index: 10;"></div>
</div>

<script language="JavaScript" type="text/javascript">
obj = document.getElementById("orange_line");
function moveLine()
{
 w = parseInt(obj.offsetLeft);
 obj.style.left = (w+5) + "px";
 if (w < 375) {
  setTimeout("moveLine()", 20);
 }
}
setTimeout("moveLine()", 600);
</script>

Je tweede script krijg ik echter niet werkend, ook niet exact zoals jij hem hebt gepost.
Hij werkt dan wel zonder errors maar doet iets heel anders.
Als ik weer de aanpassing maak zoals hierboven krijg ik een JS error.
De code is simpel, dus ik begrijp hem prima, echter zie ik niet waarom die errors verschijnen.
Anyway: je eerste script werkt perfect, en precies wat ik hebben wil. Nogmaal bedankt dus

Ik ga hem nu trouwens nog aanpassen dat wanneer een 2e tumbnail wordt aangepast die van rechts naar links terugschuift over de eerste image
Effe checken of dat gaat lukken

[Urk]

Jaja! Nu werkt naar links en rechts ook bijna goed!

Alleen nog 1 probleem, wellicht kan je me nog met het laatste helpen Andre...
De code is nu als volgt:

code:

<div style="position: relative; width: 380px; height: 380px; z-index: 2;">
 <div style="position: absolute; z-index: 5;">[img]"test_voorkant_groot.jpg"[/img]</div>
 <div id="orange_line" style="position: relative; left: 0px; width: 380px; height: 380px; background-color: #FFFFFF; border-left: 4px solid #FF9900; z-index: 10;"></div>
</div>

<script language="JavaScript" type="text/javascript">
obj = document.getElementById("orange_line");

function moveLineLeft() {
 w = parseInt(obj.offsetLeft);
 obj.style.left = (w-5) + "px";
 if (w > 5) {
  setTimeout("moveLineLeft()", 20);
 }
}

function moveLineRight() {
 w = parseInt(obj.offsetLeft);
 obj.style.left = (w+5) + "px";
 if (w < 375) {
  setTimeout("moveLineRight()", 20);
 }
}

function checkDirection(enlargeTumbimg, loadbackimage) {
if(parseInt(obj.offsetLeft) > 50) {
 obj.innerHTML="[img]'"+enlargeTumbimg+"'[/img]"
 setTimeout("moveLineLeft()", 600);
}
else {
 if(loadbackimage==true) {
  document.getElementById("uitvergroting").src=enlargeTumbimg;
 }
 setTimeout("moveLineRight()", 600);
 }
}

checkDirection();
</script>

Echter als ik een image eroverheen van rechts naar links wil schuiven neemt hij ook de ruimte rechts in beslag, en daardoor ontstaan scrollbars die ik niet wil.
Heb al geprobeerd om i.p.v. obj.innerHTML="[img]'"+enlargeTumbimg+"'[/img]" obj.style.background-image te gebruiken maar dat werkt helaas niet.

Als je wilt kan ik het praktijk voorbeeld laten zien...

[ Voor 31% gewijzigd door Urk op 22-07-2005 02:09 . Reden: Even de opmaak van de code wat leesbaarden gemaakt ]

[crisp]

clipping gebruiken (als voorbeeld: zie de updatetracker hier rechtsboven)

[Verwijderd]

crisp schreef op vrijdag 22 juli 2005 @ 08:53:
clipping gebruiken (als voorbeeld: zie de updatetracker hier rechtsboven)

Updatetracker, volgens mij heb ik een knopje gemist?

[Urk]

Thanks.
Vreemd, ik zie de update tracker alleen als ik uitgelogd ben..

Anyway: het probleem wordt met overflow: hidden opgelost, maar alleen in Firefox
In MSIE gebeuren er allerlei vage dingen...
Dan heb ik het volgende als eerste div

code:

<div style="position: relative; width: 384px; height: 380px; z-index: 2; overflow: hidden;">[...]</div>

Van clipping vindt ik nergens code voorbeelden hier op GoT, en de code van de GoT homepage/Updatetracker is zonder opmaak, dus daar wordt ik geen wijs uit. Ook de javascripts krijg ik niet geopent.
Wellicht een praktijkvoorbeeld, of code van hoe clipping precies te gebruiken vanuit JS?

[Urk]

Ik heb het idee dat dat hele clipping niet werkt, clipping kan toch ook voor een DIV gebruikt worden?
Het dient b.t.w. in zowel MSIE en FF te werken en het liefst ook in Safari op MacOS X.

Ik kan onderstaande niet uitlezen, krijg undefined:

code:

alert(obj.style.clip.right);

Ook schrijven hiernaar toe werkt niet, zie geen verschil in IE en FF, en ook geen JS foutmelding..

[crisp]

JavaScript:

obj.style.clip='rect(10px,10px,10px,10px)';

[Urk]

crisp schreef op vrijdag 22 juli 2005 @ 14:26:

JavaScript:

obj.style.clip='rect(10px,10px,10px,10px)';

Hmmm....ik heb nu toch anders gedaan, en werkt perfect in IE en FF. Ook weer met overflow: hidden;
Alleen had ik ergens nog een padding-right: 5px; staan waardoor het niet goed liep.

Met clipping werkt niet lekker, heel schokkerig! Klopt het dus dat clipping SUPER TRAAG is??

Ik heb nu de volgende code:

code:

[...]
<td width="410" style="vertical-align: bottom;">
  
 <div style="position: relative; width: 384px; height: 380px; z-index: 2; overflow: hidden;">
  <div style="position: absolute; z-index: 5;">[img]"test_voorkant_groot.jpg"[/img]</div>
  <div id="orange_line" style="position: relative; left: 0px; width: 380px; height: 380px; background-color: #FFFFFF; border-left: 4px solid #FF9900; z-index: 10;"></div>
 </div>
   
</td>
[...]

<script language="JavaScript" type="text/javascript">
obj = document.getElementById("orange_line");
function moveLineLeft() {
 w = parseInt(obj.offsetLeft);
 obj.style.left = (w-5) + "px";
 if (w > 5) {
  setTimeout("moveLineLeft()", 20);
 }
}
function moveLineRight() {
 w = parseInt(obj.offsetLeft);
 obj.style.left = (w+5) + "px";
 if (w < 375) {
  setTimeout("moveLineRight()", 20);
 }
}
function checkDirection(enlargeTumbimg, loadbackimage) {
if(parseInt(obj.offsetLeft) > 50) {
 obj.innerHTML="[img]'"+enlargeTumbimg+"'[/img]"
 setTimeout("moveLineLeft()", 600);
}
else {
 if(loadbackimage==true) {
  document.getElementById("uitvergroting").src=enlargeTumbimg;
 }
 setTimeout("moveLineRight()", 600);
 }
}
checkDirection();
</script>

Er zijn nu nog wat bugs die ik eruit moet halen, dat als iemand bijv een tumb img klikt tijdens de slide show het script daar rekening mee houd...