✔ Fotogalerie a la rus-star.com / jCarousel Fotogalerie einbinden

Status
Nicht offen für weitere Antworten.
D

Dustin84

Erfahrenes Mitglied
jCarousel Fotogalerie - Bild in div laden ?

Hallo,

auf rus-star.com gibt es unter "Portfolio" ein nettes Galeriescript.

Hat jemand eine Ahnung, wo ich das (oder stark vergleichbares) finde ?

Gruß
Dustin
 
Zuletzt bearbeitet:
Hi,

mir verrät der Quellcode der Portfolio-Seite, dass das Galeriescript auf jQuery und dem Plugin jCarousel basiert, und das Thema somit aus dem PHP-Forum in den fachbezogenen Forenbereich umgeleitet gehört ;)

mfg Maik
 
jCarousel Fotogalerie einbinden

Hallo,

ich möchte auf meiner Website das jCarousel Javascript für meine Fotogalerie einbinden, jedoch ohne Erfolg.

So wieht das Script aus:
Fotoalbum Script

(Später werden dynamisch Galerien erzeugt und das Design muss ich auch noch anpassen aber erstmal bin ich froh, wenn das einbinden funktioniert.)

Den Seitenkopf lade ich mit PHP in meine index.php der Fotoseite.
Dort sind auch die Pfadangaben zu den jCarousel Dateien und die Funktionen.
Das sieht so aus:

PHP: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Chicken Palace</title>

<script type="text/javascript">

jQuery(document).ready(function() {
    
	jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
   
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); 
   
      };
	
	$("#toggle").click(function () {
      $("#toggleContent").slideFadeToggle('slow');
    });
	
	jQuery('#mycarousel').jcarousel();
});
</script>

<script type="text/javascript" src="/_standards/js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/_standards/js/jcarousel/jcarousel/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/_standards/js/jcarousel/jcarousel/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/_standards/js/jcarousel/jcarousel/skin/skin.css" />
<script src="/_standards/js/AC_RunActiveContent.js" language="javascript"></script><!-- Include Flash -->

</head>

<link rel="stylesheet" type="text/css" href="/_standards/css/standards.css" />
<!--[if IE]>
	<style type="text/css">@import url(/_standards/css/standard_ie.css);</style>
<![endif]-->
<body>
<center><!--Center Seiten Div -->
<div style="width:960px;" /><!-- Beginn ganze Seite Container -->
  <script language="javascript"><!-- Beginn Flash Container -->
	if (AC_FL_RunContent == 0) {
		alert("Diese Seite erfordert die Datei \"AC_RunActiveContent.js\".");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
			'width', '960',
			'height', '274',
			'src', '/_standards/flash/header',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'header_3',
			'bgcolor', '#666666',
			'name', 'header',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', '/_standards/flash/header',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="960" height="274" id="header_3" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="/_standards/flash/header.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#666666" />
    <embed src="/_standards/flash/header.swf" quality="high" bgcolor="#666666" width="960" height="274" name="header_3" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</noscript>

Was für eine ID ist dieses mycarousel ? Wo finde ich das ? Zweck ?


Ok, und nun der Code meine index.php:

PHP: 
<?php include($_SERVER['DOCUMENT_ROOT'].'/_standards/php/seitenkopf.php'); ?><!-- Include Seitenkopf -->

<div style="width:640px; float:left; margin-bottom:15px;"/><!-- Beginn linke Spalte Container -->    	
	<!-- Beginn Content Container -->
    <div style="width:547px; border:5px solid #f3eef0; float:right; margin: 0px 16px 0px 0px; background-color:#cdccba" align="left"/>
		<div class="fotoauswahl"><!-- btn Fotoalbum,Videos -->
			<div id="fotoalbum" style="float:left; margin-left:0px; margin-top:0px;"/>
				<a href="/index.php"><img src="/_standards/bilder/pixel.gif" width="108" height="26" border="0" /></a>
			</div>
            <div id="videos" style="float:left; margin-left:5px; margin-top:0px;"/>
				<a href="/Fotoalbum/index.php"><img src="/_standards/bilder/pixel.gif" width="108" height="26" border="0" /></a>
			</div>
            <div style="clear:both"></div>
            <div style="width:533px; height:33px; background-color:#ffffff;"/>
            <form>
				<select name="auswahl" onChange=formHandler(this.form) size="1" class="auswahl" >
					<option value="Fotoalbum/index.php">18. Geburtstag - Motto: Kiez</option>
					<option value="Fotoalbum/index.php">Carl-Diem-Halle</option>
                    <option value="carldiem.html">Carl-Diem-Halle</option>
                    <option value="carldiem.html">Carl-Diem-Halle</option>
				</select>
			</form>
            <div style="padding:7px 0px 0px 26px; color:#9f9e9a;"/>Auswahl:</div>
            
            
            <ul id="mycarousel" class="jcarousel-skin-ie7">
   				The content goes in here 
			</ul>
			
            
            </div>
		</div>  
	</div>          
</div>


<div style="width:320px; float:right; background-color:#303030"/><!-- Beginn rechte Spalte Container -->
	<div style="width:306px; height:281px;">
    	<div class="headlinerechts"><div class="headline2">Geburtstag im Chicken Palace</div></div>
        	<div class="fotobox"><img src="/_standards/bilder/testbild.gif" width="281" height="199" style="margin:5px 0px 5px 0px;"/></div>
        </div>
        
</center>


</body>
</html>


Habe ich alles bishin richtig gemacht ?

Bisher wird mir auf der Website nichts angezeigt.
Wie lade ich die Bilder dynamisch in die Galerie ?


Gruß
Dustin
 
Dreiundzwanzig Minuten später kann ich mich da nur wiederholen: Vergleich bitte den Quellcode des Beispiels mit dem deiner Seite. Fällt dir darin nichts auf?

mfg Maik
 
Sorry, ich will dir jetzt nicht zu Nahe treten, aber dann mußt du mächtig betriebsblind sein, denn dieser JS-Code ist im Dokumentheader des verlinkten Beispiels schier nicht zu übersehen:

Javascript: 
var mycarousel_itemList = [
    {url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1"},
    {url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2"},
    {url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3"},
    {url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4"},
    {url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5"},
    {url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6"},
    {url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7"},
    {url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8"},
    {url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9"},
    {url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10"}
];

function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }

        if (i > mycarousel_itemList.length) {
            break;
        }

        carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
    }
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.url + '" />';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});


mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück