Gå til innhold

Få bildegalleri horisontalt

Camoflash

Av Camoflash
i Programmering og webutvikling

Anbefalte innlegg

Camoflash

Camoflash

Skrevet
Skrevet (endret)

Jeg har et lite problem med scriptet mitt på bildegalleriet. Jeg vet liksom ikke hvordan jeg skal kunne få bildene ved siden av hverandre. Akkurat nå går de bare under hverandre vertikalt.

Lurer på om noen kan hjelpe.

 

Dette scriptet henter opp filer bilder fra en mappe og viser de. (Bruker også lightbox 2, hvis dere lurte; rel=\"lighitbox[roadtrip]\")

 

Her er koden:

 

<?php

$path = "gallery/thumb/pitstop/";

$path2 = "gallery/img/pitstop/";

$dir = opendir($path);

while ($file = readdir($dir));

$dir = opendir($path2);

while ($file = readdir($dir))

{

if (!strstr($file,".jpg")) continue;

echo "\n <p><a href=\"".$path2.$file."\" rel=\"lightbox[roadtrip]\">

<img border=\"1\" src=\"".$path.$file."\"></a></p>";

}

?>

 

du finner siden midlertidig på: 

http://www.loud.no/loudsiden/index.php?side=pitstop

Endret av Camoflash
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
luxus

luxus

Skrevet
Skrevet (endret)

Med din kode ender vi opp med HTML ala:

<p><a href=""><img src="" /><a/></p>
<p><a href=""><img src="" /><a/></p>
<p><a href=""><img src="" /><a/></p>
<p><a href=""><img src="" /><a/></p>
... osv ...

 

Du pakker altså alle link&bildene dine inn i egne paragraf-elementer. P elementer er block elementer som normalt nekter å ha andre block-elementer ved siden av hverandre. Dette er mao egentlig ikke et PHP-problem, men et HTML/CSS "problem". Løsningen er f.eks. å bare ha en p-tag, og å legge alle lenkene/bildene inn der, altså slik: 

<p>
 <a href=""><img src="" /><a/>
 <a href=""><img src="" /><a/>
 <a href=""><img src="" /><a/>
 <a href=""><img src="" /><a/>
</p>

 

En annen løsning er å sette float på p-elementene dine, slik at de tillater at andre elementer å komme opp på siden av seg. <p style="float: left;">...</p>.

 

Jeg så på nettsiden din nå; i CSS kan du definere:

div.thumbnail p {
 float: left;
}

 

 

.. men jeg tror jeg hadde droppet alle P'ene rundt hvert enkelt bilde. Egentlig trenger du ikke noe P rundt i det hele tatt, da bildene ligger inne i DIV'en din med klasse thumbnail. (Hvis ikke bildene MÅ ligge inne i P'en pga javascriptet jeg så du hadde eller noe da..)

Endret av luxus
Lenke til kommentar
Camoflash

Camoflash

Skrevet
  • Forfatter
Skrevet
Med din kode ender vi opp med HTML ala:

<p><a href=""><img src="" /><a/></p>
<p><a href=""><img src="" /><a/></p>
<p><a href=""><img src="" /><a/></p>
<p><a href=""><img src="" /><a/></p>
... osv ...

 

Du pakker altså alle link&bildene dine inn i egne paragraf-elementer.  P elementer er block elementer som normalt nekter å ha andre block-elementer ved siden av hverandre. Dette er mao egentlig ikke et PHP-problem, men et HTML/CSS "problem". Løsningen er f.eks. å bare ha en p-tag, og å legge alle lenkene/bildene inn der, altså slik: 

<p>
 <a href=""><img src="" /><a/>
 <a href=""><img src="" /><a/>
 <a href=""><img src="" /><a/>
 <a href=""><img src="" /><a/>
</p>

 

En annen løsning er å sette float på p-elementene dine, slik at de tillater at andre elementer å komme opp på siden av seg. <p style="float: left;">...</p>.

 

Jeg så på nettsiden din nå; i CSS kan du definere:

div.thumbnail p {
 float: left;
}

 

 

.. men jeg tror jeg hadde droppet alle P'ene rundt hvert enkelt bilde. Egentlig trenger du ikke noe P rundt i det hele tatt, da bildene ligger inne i DIV'en din med klasse thumbnail. (Hvis ikke bildene MÅ ligge inne i P'en pga javascriptet jeg så du hadde eller noe da..)

9556511[/snapback]

Her er hele koden min:

 

CSS:

.thumbnail{

background-color: #ffffff;

border: 1px solid lightgrey;

float: left;

margin-right: 5px;

margin-bottom: 5px;}

 

PHP:

<div class="thumbnail">

 

<?php

$path = "gallery/thumb/pitstop/";

$path2 = "gallery/img/pitstop/";

$dir = opendir($path);

while ($file = readdir($dir));

$dir = opendir($path2);

while ($file = readdir($dir))

{

if (!strstr($file,".jpg")) continue;

echo "\n <p float=\"left\"><a href=\"".$path2.$file."\" rel=\"lightbox[roadtrip]\">

<img border=\"1\" src=\"".$path.$file."\"></a></p>";

}

?>

 

</div>

 

Har prøvd med og uten paragraf men går desv ikke. :( ..??

Lenke til kommentar
Haraldson

Haraldson

Skrevet
Skrevet (endret)

Først av alt, Joakim, flytter jeg denne til Web-design, HTML og CSS, internt kalt WDS.

 

For det andre, hvis du har prøvd 

<p float=\"left\">

går det åpenbart ikke.

 

<p style=\"float: left\">

 

 

Riktig som luxus sier over her, bare fjern paragrafene og sett float på img-taggene i galleri-diven din.

Endret av Haraldson
Lenke til kommentar
Camoflash

Camoflash

Skrevet
  • Forfatter
Skrevet

Mener du slik:

 

CSS:

#thumbnail p{

float: left;}

 

PHP:

<div id="thumbnail"><p>

 

<?php

$path = "gallery/thumb/pitstop/";

$path2 = "gallery/img/pitstop/";

$dir = opendir($path);

while ($file = readdir($dir));

$dir = opendir($path2);

while ($file = readdir($dir))

{

if (!strstr($file,".jpg")) continue;

echo "\n <a href=\"".$path2.$file."\" rel=\"lightbox[roadtrip]\">

<img border=\"1\" src=\"".$path.$file."\"></a>";

}

?>

 

</p></div>

Lenke til kommentar
luxus

luxus

Skrevet
Skrevet (endret)

Jeg ser du nå har i CSS'en din:

.thumbnail{

background-color: #ffffff;

border: 1px solid lightgrey;

float: left;

margin-right: 5px;

margin-bottom: 5px;

}

 

 

Jeg sa du skulle ha

.thumbnail p {

float: left;

}

Dette er altså to blokker, ikke i samme blokk. :-)

Du har også: <p float=\"left\"> .. det er feil, jeg skrev <p style="float: left;">

MEN: Du trenger bare EN av disse, du trenger ikke definere den samme CSS'en begge steder.

 

 

 

Men, som jeg sa helt til slutt i sta også; det aller beste er å ta vekk alle P-tag'ene som ligger rundt A og IMG-tagen. Det eneste du trenger er slik at HTML koden din blir:

<div class="thumbnail">
 <a href="en url"><img src="" /></a>
 <a href="en url"><img src="" /></a>
 <a href="en url"><img src="" /></a>
</div>

 

Hvis du gjør det på denne måten trenger du ikke å sette float i CSS'en din noen av stedene nevnt til nå, det du der i mot må gjøre er i denne blokken:

a {
 color: grey;
 display: block;
 padding-bottom: 10px;
}

Her skal du ta bort linjen med display: block;, Jeg ser ikke noe grunn til at alle A-tags skal være definert som blocks, det virker relativt dumt uansett, og det gjør at bildene dine (siden de har A-tags rundt seg) ikke vil legge seg ved siden av hverandre.

(Du skal ikke trenge å legge float på img-tag'ene dine slik Haraldson sa, både a og img er normalt inline elementer og legger seg derfor etter hverandre så lenge det er plass i containerelementet (i dette tilfellet altså om div'en med class thumbnail er bred nok for flere bilder å få plass ved siden av hverandre.)).

Endret av luxus
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...