Ankündigung

Einklappen
Keine Ankündigung bisher.

Datensätze aus DB in einem jQuery Slider anzeigen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Datensätze aus DB in einem jQuery Slider anzeigen

    Hallo zusammen

    Ich habe folgendes Problem.

    In einer Datenbank habe ich dutzende Einträge, eine Art Enzyklopädie (Bsp. Wort, Beschreibung, Beispiel & Bilder). Nun möchte ich all diese Einträge nacheinander in einem Slider angezeigt bekommen. Ich habe schon vieles versucht aber das gewünschte nicht zustande bekommen.
    Was ich schaffe ist den ersten Datensatz wie gewünscht im Slider anzuzeigen, alle weiteren Einträge jedoch nicht. Bin schon seit Monaten daran und nun am Ende mit meinem Laienhaften Latein. Wenn ich die while Schleife einfüge, dann zeigt mir der Browser einfach den ganzen Slider (zwar mit allen gewnschten Datensätzen) mehrfach an.

    Hier mein Code (Bitte entschuldigt falls dieser hier falsch von mir eingetragen ist)

    Mein Kopf des HTMLs

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="JavaScript" src="js/jquery-1.7.1.min.js"></script>
    <script language="JavaScript" src="js/jquery-slider-min.js"></script>
    <script language="JavaScript" src="js/jquery-sliding_effect.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/slider.css" />
    <link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen" />
    
    
    <title></title>
    
    
    
    <script>
    $(document).ready(function() {
    //add opacity-background
    $('article#container').prepend('<div style="position:absolute;background:#282421; width:958px;height:100%;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;z-index:-1;border-radius:0px;"></div>');
    //add float-fixing
    $('article#container').append('<br style="clear:both;"/>');
    });
    
    $(window).load(function() {
    	$('.slider').slider({
    		animation: "slide",
    		controlsContainer: ".slider-container",
    		pauseOnAction: false,
    		pauseOnHover: true 
    	});
    
    });
    </script>
    
    
    </head>
    Hier mein body inkl. dem PHP Teil:

    Code:
    <body>
    
    <?php
    
    $db = mysql_connect("localhost", "root", "") or die (mysql_error());
    
    mysql_select_db("test", $db);
    
    $result = mysql_query("SELECT * FROM items");
    	$dsatz = "";
    	
    	$name = "enzo";
    	
    	$num = mysql_num_rows($result);
    	while($dsatz = mysql_fetch_assoc($result))
    	{
    
    ?>
    
    <section id="wrapper">
    		
    	<article id="container">	
    		<figure class="slider-container">
    			<div class="slider">
    				<ul class="slides">
    					<li>
    						<h2>Wort/Begriff</h2>
    						<p><?php echo $dsatz['Name']; ?></p>
    						<h2>Beschreibung</h2>
    						<p><?php echo $dsatz['Nachname']; ?></p>
    						<h2>Beispiel</h2>
    						<p><?php echo $dsatz['Alter']; ?></p>
    						<h2>Bider</h2>
    						<p><?php echo $dsatz['Name']; ?></p>
    					</li>
    					<li>
    						<h2>Wort/Begriff</h2>
    						<p><?php echo $dsatz['Name']; ?></p>
    						<h2>Beschreibung</h2>
    						<p><?php echo $dsatz['Nachname']; ?></p>
    						<h2>Beispiel</h2>
    						<p><?php echo $dsatz['Alter']; ?></p>
    						<h2>Bider</h2>
    						<p><?php echo $dsatz['Name']; ?></p>
    					</li>
    					<li>
    						<h2>Wort/Begriff</h2>
    						<p><?php echo $dsatz['Name']; ?></p>
    						<h2>Beschreibung</h2>
    						<p><?php echo $dsatz['Nachname']; ?></p>
    						<h2>Beispiel</h2>
    						<p><?php echo $dsatz['Alter']; ?></p>
    						<h2>Bider</h2>
    						<p><?php echo $dsatz['Name']; ?></p>
    					</li>
    					<li>
    						<h2>Wort/Begriff</h2>
    						<p><?php echo $dsatz['Name']; ?></p>
    						<h2>Beschreibung</h2>
    						<p><?php echo $dsatz['Nachname']; ?></p>
    						<h2>Beispiel</h2>
    						<p><?php echo $dsatz['Alter']; ?></p>
    						<h2>Bider</h2>
    						<p><?php echo $dsatz['Name']; ?></p>
    					</li>
    				</ul>
    			</div>
    		</figure>
    		<section class="index">
    		<?php
    		}
    		?>
    			<h1>Casa Mobi Startseite</h1>
    			<article class="indexSpace1">
    				<p>
    					<img class="framedImg" alt="Picture" src=""/>
    					<?php home(); ?>
    				</p>
    			</article>
    			<article class="indexSpace2">
    				<div>
    					<h2>Special Offers</h2>
    					<ul>
    						<li>bla bla 1</li>
    						<li>bla bla 2</li>
    						<li>bla bla 3</li>
    						<li>bla bla 4</li>
    						<li>bla bla 5</li>
    					</ul>
    				</div>
    				<div>
    					<h2>Location</h2>
    					<p>Lorem ipsum dolor sit amet, porta dolor amet, pede hac ac semper, consequat vestibulum eget vestibulum aliquet.</p>
    					<a href="#">Kokainstrasse 45<br />Cuba</a>
    					<a class="link" href="http://maps.google.de/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Seefeldstrasse+7a,+Z%C3%BCrich,+Schweiz&amp;sll=51.151786,10.415039&amp;sspn=14.708988,45.74707&amp;ie=UTF8&amp;hq=&amp;hnear=Seefeldstrasse+7A,+8008+Z%C3%BCrich,+Schweiz&amp;ll=47.364816,8.548307&amp;spn=0.005087,0.009141&amp;z=16&amp;output=embed?iframe=true&width=800&height=600" rel="prettyPhoto[iframes]" title="Hier befindet sich Body Line Cosmetic">Kartenansicht</a>
    				</div>
    			</article>
    		</section>
    	</article>
    <?php include_once "includes/footer.php" ?>
    </section>
    
    </body>
    Für einen Ansatz in die richtige Richtung wäre ich äusserst dankbar. Evtl. muss ich das ja ganz anders angehen (Xml, javascript etc.) falls ja, wäre ich doch für ein Gerüst oder Beispiel Code dankbar.


  • #2
    Moin,

    trenn doch zunächst mal deinen Task. Erstmal ohne PHP und MySQL. Schreib hart-kodiert 2-3-4-5 Einträge in HTML oder als JS-Array und slide die. Wenn das funktioniert, weißt du schon mal, dass dein Slider funktioniert.

    Danach kannst du dann die 2-3-4-5 Einträge durch deinen dynamischen Inhalt aus der DB ersetzen.

    Dein Beispiel ist zum Helfen jetzt auch etwas dürftig, kenne die JS-Libs nicht. Notfalls mal online Beispiel herzeigen. Browserkonsole auch noch auf Fehler kontrollieren. Und bitte alles hier geschriebene beachten, nicht nur ein online Beispiel als Antwort posten

    Gruß
    "Mein Name ist Lohse, ich kaufe hier ein."

    Kommentar

    Lädt...
    X