13 svar · 896 visningar · startad av tllt
Jag håller på med en liten hemsida till mina foton, och vill ha dem sida vid sida i en lång rad, alltså så att man måste scrolla (eller åtminstone trycka på pilen åt höger) åt sidan istället för neråt för att se bilderna. Men automatiskt hoppar bilderna ner, så det måste vara någon särskilt kod som gör att man får scrolla åt höger. Är det något ni har koll på?
Är verkligen tacksam för svar! MVH T
Jag gjorde en sida för ett tag sedan som också var menat att ha horisontell scrollning.
Det jag gjorde var att m.h.a. php loopa igenom alla bilder som skulle vara på en sida, och plussa ihop deras sammanlagda bredd och använda det värdet när jag satte width på body-taggen.
Mig veterligen finns det inget annat sätt.
http://smekbar.se/ivarboson/?page=photography
Du kan ju testa att söka på "horizontal scrolling" på google och se om du hittar en bättre lösning.
Tack så mycket! Det lät som om jag skulle kunna klara av att fixa det, är annars inte väldigt hemma på koderna. Var/hur skriver jag in witdh-koden i body?
Såhär såg php-klassen ut som jag gjorde för att hämta bilderna och bredden på bilderna.
<?
class photo {
private $imgFolder;
public function __construct($imgFolder) {
$this->imgFolder = $imgFolder;
}
public function folderEntry() {
$i = 0;
while($folderEntry = $this->imgFolder->read()) {
if ($folderEntry != '.' && $folderEntry != '..') {
$imageArray[$i] = $folderEntry;
$i++;
}
}
return $imageArray;
}
public function getNbrOfPhotos() {
return count($this->folderEntry());
}
public function getImageSize() {
$imageSize = 0;
foreach ($this->folderEntry() as $value) {
list($width) = getimagesize($this->imgFolder.$value);
$imageSize += $width;
}
return $imageSize;
}
public function printPhoto() {
if ($this->getNbrOfPhotos() > 0) {
foreach ($this->folderEntry() as $value) {
echo '<img src="$this->imgFolder.$value alt="" style="padding-right: 20px;" />';
}
} else {
echo 'No photographs in this folder.';
}
}
}
?>
Sen anropar jag den i photo.php
<?
require_once 'class/photo.php';
$photo = new photo('images/');
?><!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" xml:lang="sv" lang="sv">
<head>
<title>title.se</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<?
if ($photo->getImageSize() > 0) {
// $photo->getNbrOfPhotos*20 är paddingen mellan bilderna
echo '<body style="width: '.($photo->getImageSize()+($photo->getNbrOfPhotos*20)+200).'px;">';
} else {
echo '<body>';
}
// skriver ut fotografierna
$photo->printPhoto();
?>
</body>
</html>
oj, herregud, det där var nog för svårt för mig! :P men tack ändå!
Det är inte säkert att du måste sätta någon bredd alls egentligen, det finns väl lite olika lösningsvarianter. Testa nedanstående, det kanske räcker?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<title>Mitt galleri</title>
<style type="text/css">
ul.images {
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
ul.images li {
display: inline;
}
</style>
</head>
<body>
<h1>Mitt galleri</h1>
<ul class="images">
<li><img src="test1.jpg" alt=""></li>
<li><img src="test2.jpg" alt=""></li>
<li><img src="test3.jpg" alt=""></li>
<li><img src="test4.jpg" alt=""></li>
<li><img src="test5.jpg" alt=""></li>
</ul>
</body>
</html>
Gör en tabel runt bilderna bara !
<table border="0">
<tr>
<td>bild 1<br/>bildtext</td>
<td>bild 2<br/>bildtext</td>
<td>bild 3<br/>bildtext</td>
</tr>
</table>
Vill du ha mellanrumm mellan bilderna sätter du en bredd på td-taggen. Vill du ha utrymme ovan och under bilden kan du sätta en höjd. Du kan också ställa in just "luft" runt bilderna. Tabel taggen är väl dokumenterad så du kommer lätt att hitta information om allt du vill göra.
tack så mycket allihop, jag löste det genom en "div" där jag kunde skriva in bredden! :-)
En fråga bildades bland dom grå när jag funderade på ditt problem. Fungerar ankare-länkar även sidledes ? (Det borde göra det, men jag har aldrig provat) Vore ju snyggt om man kunde hoppa direkt till en bild eller stega sig fram till nästa.
(Bara nyfiken och frågvis)
Resultatet har vi här! http://tovelarsson.tk :D
Snygga bilder !!
Nu har du löst scrolla till höger men en enkel variant är denna kod :
http://medzeta.se/milla.html
http://medzeta.se/thaiblom.html
<NOBR>
<IMG SRC="milla/a.jpg"><IMG SRC="milla/b.jpg"> <IMG SRC="milla/c.jpg">
<IMG SRC="milla/f.jpg"> <IMG SRC="milla/g.jpg"> <IMG SRC="milla/h.jpg"><IMG SRC="milla/i.jpg"><IMG SRC="milla/j.jpg"><IMG SRC="milla/k.jpg">
</NOBR>
</DIV>
<NOBR>
<HR WIDTH="3030">
Tycker oxå du har jättefina bilder men lite väl tom första sida...
Jag håller på med en liten hemsida till mina foton, och vill ha dem sida vid sida i en lång rad, alltså så att man måste scrolla (eller åtminstone trycka på pilen åt höger) åt sidan istället för neråt för att se bilderna. Men automatiskt hoppar bilderna ner, så det måste vara någon särskilt kod som gör att man får scrolla åt höger. Är det något ni har koll på?
Är verkligen tacksam för svar! MVH T
Enklast (men utan finesser): Lägg dom helt enkelt i en tabell med en enda rad:
<table><tr>
<td>Bild 1</td><td>Bild 2</td><td>Bild 3</td><td>Bild 4</td><td>Bild 5</td>
</tr></table>
PhotoShop har ett enkelt sätt att göra detta (och massa andra former av fotoalbum på webben), även så att det blir miniatyrbilder som förstoras när man klickar på dem. Bara att välja en katalog med bilderna och form av album, sedan är det klart ;) Dock blir det säkert mycket skräpkod.