Bilde slideshow med filmstripe!

Nicolasn · 26. august 2007

Tenkte jeg skulle legge en litt ny vri på hjemmesiden min for framlegg av bilder, og valget falt på dette.

Men av enn eller annen grunn funker den sånn ca halveis :blush: Og jeg klarer ikke å finne ut hva det er, noen som kune vært så snill å hjulpet litt??

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Mercer - Play with your heart!</title>

<!--

body,html {

margin: 0px 0px 0px 0px;

}

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

.mt {

color: #959595;

font-family:verdana;

text-align:left;

font-size:9px;

}

.mt2 {

color: #fff;

font-family:verdana;

text-align:left;

font-size:9px;

}

.bg {

background-image:url(http://i133.photobucket.com/albums/q80/aeonsky/ah4/bg.jpg)

}

.w {

background-color: #272727

}

.db {

background-color: #032b3c

}

.pt3 {

padding-top:3px

}

.cm {

border:1px solid #fff;

background-color: #474747;

padding: 3px 0px 3px 0px;

color: #959595;

font-family:verdana;

text-align:center;

font-size:9px

}

.rm {

border:1px solid #fff;

background-color: #474747;

padding: 3px 0px 3px 0px;

color: #fff;

font-family:verdana;

text-align:left;

font-size:9px;

padding-left:3px

}

.bb {

border-bottom:1px solid #cccccc;

color:#fff

}

.m {text-align:center;

}

a:link {

FONT-SIZE: 9px;

COLOR: #fff;

FONT-FAMILY: verdana;

font-weight:normal;

text-decoration:none;

}

a:visited {

FONT-SIZE: 9px;

COLOR: #fff;

FONT-FAMILY: verdana;

font-weight:normal;

text-decoration:none;

}

a:hover, a:active {

FONT-SIZE: 9px;

COLOR: #fff;

FONT-FAMILY: verdana;

font-weight:normal;

text-decoration:underline;

}

.p3t {

padding-top:3px

}

body{

background-image:url('');

background-repeat:no-repeat;

padding-top:80px;

}

#dhtmlgoodies_slideshow{

width:600px; /* Total width of slideshow */

}

#previewPane{

border:1px solid #CCCCCC;

margin-bottom:10px;

text-align:center;

vertical-align:middle;

padding-top:10px;

position:relative;

/* CSS HACK */

height: 432px; /* IE 5.x */

height/* */:/**/420px; /* Other browsers */

height: /**/420px;

}

#previewPane img{

line-height:400px;

}

#previewPane #largeImageCaption{ /* CSS styling of image caption below large image */

font-style:Arial;

text-align:center;

font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */

font-size:0.9em;

}

#galleryContainer{

height:102px; /* Height of the images + 2 */

border:1px solid #CCCCCC;

position:relative;

overflow:hidden;

padding:1px;

/* CSS HACK */

height: 104px; /* IE 5.x - Added 2 pixels for border left and right */

height/* */:/**/102px; /* Other browsers */

height: /**/102px;

}

#arrow_left{

position:absolute;

left:0px;

z-index:10;

background-color: #FFF;

padding:1px;

}

#arrow_right{

position:absolute;

right:0px;

z-index:10;

background-color: #FFF;

padding:1px;

}

#theImages{

position:absolute;

height:50px;

left:40px;

width:100000px;

}

#theImages #slideEnd{

float:left;

}

#theImages img{

float:left;

padding:1px;

filter: alpha(opacity=50);

opacity: 0.5;

cursor:pointer;

border:0px;

}

#waitMessage{

display:none;

position:absolute;

left:200px;

top:150px;

background-color:#FFF;

border:3px double #000;

padding:4px;

color:#555;

font-size:0.9em;

font-family:arial;

}

#theImages .imageCaption{

display:none;

}

-->

</style>

<style type="text/css">@import url(http://www.blogger.com/css/navbar/classic.css);

div.b-mobile {display:none;}

</style>

/***********************************************************************************************

UPDATE LOG:

March, 10th, 2006 : Added support for a message while large image is loading

Get this and other scripts at www.dhtmlgoodies.com

You can use this script freely as long as this copyright message is kept intact.

***********************************************************************************************/

</script>

</head>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<a href=" ">Hjem</a> -

<a href=" ">Filmer</a> -

<a href=" ">Artikler</a> -

<a href=" ">Galleri </a> -

</tr>

<tr>

</tr>

<tr>

<tr>

<tr>

<td class="bb">Screambox</td>

</tr>

<tr>

<a href="http://www2.shoutmix.com/?wanp0">View shoutbox</a>

</iframe>

<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox at ShoutMix!">Free shoutbox @ ShoutMix</a><br />

</a><br />

</td>

</tr>

<tr>

</tr>

<tr>

<td class="bb">LINKER</td>

</tr>

<tr>

<td class="pt3"><a href="http://www.animehaven.co.nr/">Anime Haven</a><br />

<a href="htttp://www.treningsforum.no">Treningsforum</a><br />

<a href="http://www.iform.no">Iform</a><br />

<a href="http://www.blizzard.com">Blizzard</a><br />

<a href="http://www.nettby.no/">Nettby</a><br />

<a href="http://www.facebook.com">Facebook</a><br />

<a href="http://www.gutans.net">Gutans.net</a><br />

<a href="http://www.youtube.com">Youtube</a><br />

<a href="http://www.hardware.no">Hardware.no</a><br />

<a href="http://www.kampforum.no">Kampforum</a><br />

<a href="http://www.shoutmix.com/main/">Shoutmix</a><br />

<a href="http://www.dagbladet.no">Dagbladet</a><br />

<a href="http://www.freewebs.no">Freewebs</a><br />

<a href="http://www.matprat.no">Matprat</a><br />

<a href="http://www.norwegian.no">Norwegian<br />

<a href="http://www.gulesider.no">Gulesider</a><br />

<a href="http://www.freemoviescinema.com/">Free Movie Cinema</a><br />

<a href="http://www.filecabi.net">Filecabi.net</a><br />

<a href="http://www.opera.no">Opera</a><br />

<a href="http://firefox.no/">Firefox</a><br />

<a href="http://google.com">Google</a><br />

<a href="http://www.inpoc.no">Inpoc</a><br />

<a href="http://www.fitnessprat.no">Fitnessprat</a><br />

<a href="http://www.opplysningen1881.no/">Opplysningen 1881</a><br />

<a href="http://www.chess.no">Chess</a><br />

<a href="http://www.jkdnorway.com">JKD Norway</a><br />

<a href="http://blink.dagbladet.no/index.php5">Blink</a><br />

<a href="http://www.lyricsondemand.com/">Lyrics On Demand</a> </td>

</tr>

</td>

</tr>

</table>

</div>

</td>

<tr>

<td class="rm">NEWS / NYHETER </td>

</tr>

<tr>

</td>

</tr>

<tr>

<div style="font-size:15px; font-weight:bold" class="itemtitle"><Div style="border:1px solid #fff; padding-top: 3px; padding-bottom:3px; padding-left:3px; background-color:#474747">Velkommen - bitches, h0es and mofo's!<div class="dateheader"> </Div></div></div>

<span id="waitMessage">Laster bilde...</span>

<div id="largeImageCaption">This is the caption of image number 1</div>

</div>

<div class="imageCaption">This is the caption of image number 1</div>

<div class="imageCaption">This is the caption of image number 2</div>

<div class="imageCaption">This is the caption of image number 3</div>

<div class="imageCaption">This is the caption of image number 4</div>

<div class="imageCaption">This is the caption of image number 5</div>

<div class="imageCaption">This is the caption of image number 6</div>

<div class="imageCaption">This is the caption of image number 7</div>

<div class="imageCaption">This is the caption of image number 8</div>

</br></br></br></br>

<i style="padding-top:2px">Posted by Nicolas at 18:43 PM<span class="item-control blog-admin pid-91513171"><a style="border:none;" href="http://www.blogger.com/post-edit.g?blogID=36169216&postID=5947465875221217204" title="Edit Post"><span class="quick-edit-icon"> </span></a></span></i>

<a href="http://www.mercer.tk" title="permalink"><div style="text-align: right; padding-bottom:3px">Besøk her : </a></div>

</div>

</td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

<tr>

<td>

<tr>

</tr>

</table>

</div>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</body>

</html>

Endret 27. august 2007 av Nicolasn

Nicolasn · 26. august 2007

Noen som kan hjelpe??

Danny92 · 26. august 2007

Men du må jo si hva problemme er eller så vet ikke vi hva vi skal hjelpe deg med.

Nicolasn · 26. august 2007

Men du må jo si hva problemme er eller så vet ikke vi hva vi skal hjelpe deg med.

9365852[/snapback]

Ååjah, eeeh, problemet er vell den at enkelte bilder på "filmstripen" ikke fungerer, og når jeg trykker på de bildene jeg vil ha, så kommer ikke de frem =/

Ta en titt på testsiden min :

Testside med Bildeslideshow

Endret 26. august 2007 av Nicolasn

Jakob K · 26. august 2007

Vet ikke om jeg har forstått problemet ditt riktig, men grunnen til at det ikke kommer en stor versjon av bildene når du trykker på thumbnailene er fordi du har skrevet feil adresse til de store bildene, ihvertfall.

Prøv å bytt ut

onclick="showPreview('images/image1_big.jpg','1');return false"

med

onclick="showPreview('image1_big.jpg','1');return false"

altså fjern images/ fra alle stedene det gjelder.

Nicolasn · 27. august 2007

Vet ikke om jeg har forstått problemet ditt riktig, men grunnen til at det ikke kommer en stor versjon av bildene når du trykker på thumbnailene er fordi du har skrevet feil adresse til de store bildene, ihvertfall.

Prøv å bytt ut
onclick="showPreview('images/image1_big.jpg','1');return false"
med
onclick="showPreview('image1_big.jpg','1');return false"
altså fjern images/ fra alle stedene det gjelder.

9367471[/snapback]

Jeg ordnet opp med bildenen, så nå funker de perekt. Et annet problem er at de pilene som skal brukes for å "slide" bildene blir borte når jeg har slidet bortover filmstripen en gang.

<div id="galleryContainer">
 <div id="arrow_left"><img src="http://www.freewebs.com/mercerr/arrow%5Fleft.gif">Pil</div>
 <div id="arrow_right"><img src="http://www.freewebs.com/mercerr/arrow%5Fright.gif">Pil</div>
 <div id="theImages">

Dette er koden, og som sagt er det to piler som skal bruker:

arrow_left.gif

arow_right.gif

/

og

/

arrow_left_over.gif

arrow_rigt_over.gif

...Men jeg finner ingen plass i HTML-skriptet hvor jeg kan plassere de sistnevnte GIF-ene :nei:

I tilleg til dette, så har bakgrunnen på selv siden min forsvunnet etter at jeg satte inn/prøvde dette nye bilde-scriptet.(Korriger meg om jeg bruker fagord feil)

Endret 27. august 2007 av Nicolasn

Nicolasn · 28. august 2007

flere som kan hjelpe?? :ermm:

Logg inn

Bilde slideshow med filmstripe!

Anbefalte innlegg

Nicolasn

Lenke til kommentar

Videoannonse

Nicolasn

Lenke til kommentar

Danny92

Lenke til kommentar

Nicolasn

Lenke til kommentar

Jakob K

Lenke til kommentar

Nicolasn

Lenke til kommentar

Nicolasn

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer