bitte hilfe bei zufälliger anzeige von bild und link

karliisback · 22 Februar 2015

hallo leute, könnt ihr mir bei dieser sache bitte helfen ??

ich habe einen div container mit scrollbalken und einzelnen links (bild + link) und möchte dass zufällig aus einer sammlung jeweils 5-10 zufällige links mit bild angezeigt werden.

wie realisiere ich das?

schonmal thx und greeezz

nookie · 22 Februar 2015

Mit PHP oder JavaScript.

Sempervivum · 22 Februar 2015

Steht dir denn PHP zur Verfügung? Und wie sieht die "Sammlung" aus? In welcher Form stehen die Bilder und die Links zur Verfügung?

karliisback · 22 Februar 2015

ja php kann ich nutzen xD das sollen links zu videos sein. oder wie meinst du "in welcher form" ??

Sempervivum · 22 Februar 2015

wie meinst du "in welcher form" ??

Ich meinte nicht, wo die Links hinführen, sondern ob Du vielleicht schon eine Liste oder so etwas davon hast.
Wenn nicht, müsstest Du ein Array editieren, etwa in dieser Form:

PHP:

$array = ["bild1.jpg" => "link1.html",
          "bild2.jpg" => "link2.html",
          "bild3.jpg" => "link3.html"
         ];

Sempervivum · 22 Februar 2015

Oder hast Du vielleicht schon ein HTML von den Bildern und den Links? Dann könnte man darauf aufbauen und es mit Javascript machen.

karliisback · 23 Februar 2015

ich habe ein HTML davon:

Code:

<!-- :::::::::::::::::::::::::::::::::::::::::::::::::::::::: scrollkiste :::::::::::::::::::::::::::::::::::::::::::::::::::: //-->
<div style="float:left;width:300px;height:456px;margin:0 0 0 0;background: url('http://xkill.do.am/gfx/bg-scroll.png');">
<!-- SCROLL CONTAINER //-->
<div style="float:left;width:292px;height:447px;margin:5px; 0 0 4px;overflow:scroll;overflow-x:visible;">
<!-- VID //-->
<div style="float:left;width:270px;height:80px;margin:0;padding-bottom:10px;text-align:left;border-bottom:1px solid #c4c4c4;overflow:hidden;">
<!-- PADDING //-->
<div style="float:left;width:250px;margin:10px 10px 0 10px;">
<a href="http://xkill.do.am/video/vip/81/emo/jesus_dance_family_guy" title="Jesus Dance- Family Guy" class="black"><img src="http://www.bilder-hochladen.net/files/lpbn-g-c74d.png" alt="Jesus Dance- Family Guy" border="0" width="99" height="67" style="float:left;margin:0 5px 5px 0"><b>Jesus Dance<br>Family Guy</b></a>
<!-- PADDING //-->
</div>
<!-- /VID //-->
</div>
<!-- ALLE VIDEOS //-->
</div>
<!-- /SCROLL CONTAINER //-->
</div>
<!-- :::::::::::::::::::::::::::::::::::::::::::::::::::::::: /scrollkiste :::::::::::::::::::::::::::::::::::::::::::::::::::: //-->
</div>

Sempervivum · 23 Februar 2015

Ich glaube, Du verstehst mich nicht richtig: Das sind nur drei Einträge. Du sprichst aber von einer Sammlung von Bildern und Links. Meine Frage war, ob diese schon vollständig vorliegen. Wenn nicht, kann man es mit PHP machen und Du editierst das Array, was ich oben angegeben habe. Wenn Du sie aber schon alle hast, sollte man darauf aufbauen, damit Du nicht alles neu editieren musst.
Außerdem folgende Frage: Auf deinem Bild sind rechts von den Bildern auch Texte. In deinen Beispiel-Divs finde ich diese jedoch nicht. Brauchst Du diese oder nicht?

karliisback · 24 Februar 2015

ich konnte nicht das ganze posten weil man soviel zeichen nicht posten kann. der text (link) muss auch daneben sein, das wäre mir sehr wichtig. der link ist aber im code den ich gepostet habe auch dabei.

Code:

<!-- PADDING //-->
<div style="float:left;width:250px;margin:10px 10px 0 10px;">
<a href="http://xkill.do.am/video/vip/81/emo/jesus_dance_family_guy" title="Jesus Dance- Family Guy" class="black"><img src="http://www.bilder-hochladen.net/files/lpbn-g-c74d.png" alt="Jesus Dance- Family Guy" border="0" width="99" height="67" style="float:left;margin:0 5px 5px 0"><b>Jesus Dance<br>Family Guy</b></a>
<!-- PADDING //-->
</div>

mir wäre php erlich gesagt lieber, weil ich glaube dass das script dann schlanker ist und php einfacher ist.

Sempervivum · 24 Februar 2015

Wenn wir es mit PHP machen, müsstest Du die Einträge in ein Array eintragen, etwa so:

PHP:

$array = [["bild" => "bild1.jpg", "link" => "link1.html", "text" => "Erster Text"],
          ["bild" => "bild2.jpg", "link" => "link2.html", "text" => "Zweiter Text"],
          ["bild" => "bild3.jpg", "link" => "link3.html", "text" => "Dritter Text"]
         ];

Daraus könnte man dann ganz leicht das HTML generieren.
Kannst Du denn PHP?

karliisback · 24 Februar 2015

meine website basiert zum größten teil auf php aber ich bin'n volles greenhorn was das angeht^^ das wär echt lieb von dir wenn du mich mit dem script unterstützen könntest

Sempervivum · 24 Februar 2015

OK, ich habe mal ein einfaches Skript für dich fertig gemacht:

PHP:

<?php
$number = 2;
$array = array(array("bild" => "bilder/1.jpg", "link" => "link1.html", "text" => "Erster Text"),
               array("bild" => "bilder/2.jpg", "link" => "link2.html", "text" => "Zweiter Text"),
               array("bild" => "bilder/3.jpg", "link" => "link3.html", "text" => "Dritter Text"),
               array("bild" => "bilder/4.jpg", "link" => "link4.html", "text" => "Vierter Text"),
               array("bild" => "bilder/5.jpg", "link" => "link5.html", "text" => "Fünfter Text")
);
shuffle($array);
for ($i = 0; $i < $number; $i++) {
    echo '<a class="rnda" href=' . $array[$i]["link"] . '">' . "\n";
    echo '<img class="rndim" src="' . $array[$i]["bild"] . '">' . "\n";
    echo $array[$i]["text"] . "\n";
    echo '</a><br>' . "\n";
}
?>

Das HTML kannst Du noch entspr. deinen Anforderungen verfeinern. Ich habe den Tags Klassen gegeben, damit Du sie stylen kannst, dann brauchst Du keine Inline-Styles.
Ich hoffe, Du verstehst die echo-Anweisungen. Ggf. hier nachlesen:
http://stackoverflow.com/questions/...ingle-quoted-and-double-quoted-strings-in-php

djheke · 24 Februar 2015

Bin zu spät. Trotzdem fogt ein Beispiel.

PHP:

<!doctype html>
<html>
<head>
<title>Zufallsbilder></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
margin:0;
padding:0;
list-style:none;
border:none;
text-decoration:none;
box-sizing:border-box;
}

ul {
float:left;
width:270px;
border:1px solid #000;
}

img {
float:left;
padding-right:5px;
}

li {
padding:10px;
border-bottom:1px solid #000;
float:left;
width:100%;
}
</style>
</head>
<body>

<?php
$LISTE = array();

$LISTE[] = array('href' => "http://xkill.do.am/video/vip/81/emo/jesus_dance_family_guy",'src' => "http://www.bilder-hochladen.net/files/lpbn-g-c74d.png", 'titel' => "Jesus Dance Family Guy");
$LISTE[] = array('href' => "http://xkill.do.am/video/vip/81/emo/jesus_dance_family_guy",'src' => "http://www.bilder-hochladen.net/files/lpbn-g-c74d.png", 'titel' => "Kay One Borderline");
$LISTE[] = array('href' => "http://xkill.do.am/video/vip/81/emo/jesus_dance_family_guy",'src' => "http://www.bilder-hochladen.net/files/lpbn-g-c74d.png", 'titel' => "Jack and Jack Wild Life");
$LISTE[] = array('href' => "http://xkill.do.am/video/vip/81/emo/jesus_dance_family_guy",'src' => "http://www.bilder-hochladen.net/files/lpbn-g-c74d.png", 'titel' => "Slipknot The Negative One");
$LISTE[] = array('href' => "http://xkill.do.am/video/vip/81/emo/jesus_dance_family_guy",'src' => "http://www.bilder-hochladen.net/files/lpbn-g-c74d.png", 'titel' => "Flo Rida feat. Sage The Gemini GDRF");

echo "<ul>\n";
$rand_keys = array_rand($LISTE, 3);
for ( $x=0;$x < 3; $x++) {
echo "<li><a href='".$LISTE[$rand_keys[$x]]['href']."'><img src='".$LISTE[$rand_keys[$x]]['src']."' alt='".$LISTE[$rand_keys[$x]]['titel']."'><b>".$LISTE[$rand_keys[$x]]['titel']."</b></a></li>\n";
}

echo "</ul>\n";
?>

</body>
</html>

karliisback · 25 Februar 2015

super xD

eine frage: ich habe dem style einen namen gegeben anstatt "*" jetzt muss ich aber dem php-script auch diesen namen geben oder? wie mache ich das?

Nitamud · 25 Februar 2015

Bei * handelt es sich um einen globalen Css-Reset, der browserspezifische Abstände und andere spezifische Dinge aufheben kann.

Deshalb einfach den Selektor so lassen:-)

nookie · 25 Februar 2015

Nitamud schrieb:
Bei * handelt es sich um einen globalen Css-Reset, der browserspezifische Abstände und andere spezifische Dinge aufheben kann.

Deshalb einfach den Selektor so lassen:)

Das Sternzeichen „*“ (der Asterisk) ist der Universalselektor. Mit ihm werden alle Elemente in einem Dokument angesprochen.

Edit: Wenn du auf die CSS-Eigentschaften abzielst, ist die Aussage natürlich richtig. Entschuldige.

karliisback · 25 Februar 2015

aber ich kann diese angaben nicht global dem layout überlassen, weil sonst ja andere klassen sich ändern oder?

Elroy · 25 Februar 2015

karliisback schrieb:
aber ich kann diese angaben nicht global dem layout überlassen, weil sonst ja andere klassen sich ändern oder?

Nein.

Mit deinen anderen Klassen und ID's überschreibst ja die Angeben vom Universalselektor.

Gruss
Elroy

karliisback · 25 Februar 2015

ich habe die style angegeben im header und das script im body aber es wird lediglich der code auf der seite angezeigt.

Screenshot:

Nitamud · 25 Februar 2015

Du musst die Seite als .php speichern und in e iner lokalen Testumgebung , oder online bei einem Provider mit php unterstüzung testen.

bitte hilfe bei zufälliger anzeige von bild und link

Neues Mitglied

I did it all for the nookie

Sempervivum

Guest

Neues Mitglied

Sempervivum

Guest

Sempervivum

Guest

Neues Mitglied

Sempervivum

Guest

Neues Mitglied

Sempervivum

Guest

Neues Mitglied

Sempervivum

Guest

Aktives Mitglied

Neues Mitglied

Mitglied

I did it all for the nookie

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Mitglied