Fotogalerie a la rus-star.com / jCarousel Fotogalerie einbinden @ tutorials.de: Tutorials, Forum & Hilfe

Dustin84 · 28.11.08 11:38

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

Maik · 28.11.08 15:19

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

Dustin84 · 10.12.08 12:10

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-Code:


<!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-Code:


<?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

Maik · 10.12.08 12:25

Zitat von Dustin84

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

Schau dir doch einfach den Quelltext des von dir verlinkten Beispiels genauer an.

Bei dir findet sich der HTML-Codesnippet laut deines hier gezeigten Quellcodes in der index.php.

mfg Maik

Dustin84 · 10.12.08 12:42

und woran liegt es, dass mir die Galerie gar nicht angezeigt wird ?

Maik · 10.12.08 12:48

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

Dustin84 · 10.12.08 13:01

nein, nicht wirklich.

Maik · 10.12.08 13:05

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:

Code 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

Dustin84 · 10.12.08 14:14

auch wenn ich das einsetzte, ist nichts zu sehen. Ich weiß echt nicht, wo der Fehler liegt.

Maik · 12.12.08 10:58

Ich kann den angesprochenen Script-Code in deiner Seite nicht entdecken.

mfg Maik

Dustin84 · 12.12.08 10:59

Nun funktioniert die Galerie schon ein wenig.

>> Galerie Link <<

Noch ist alles statisch aber ist noch nicht so wichtig.

Folgendes JavaScript habe ich verwendet:

PHP-Code:


<script type="text/javascript">



jQuery(document).ready(function() {

    jQuery('#mycarousel').jcarousel();

});



</script>

Nun fehlt noch das "OnClick" Ereigniss. Klickt man auf ein Bild, so soll es unter dem Slider in ein DIV gealden werden. (keine Lightbox!)

Wie mache ich das ?

Gruß
D.

Richtig, weil ich den Seitenkopf als externe .php reinlade.

Hier der Code vom Seitenkopf:

PHP-Code:


<!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" src="/_standards/js/jquery-1.2.6.min.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/lib/jquery.jcarousel.css" />

<link rel="stylesheet" type="text/css" href="/_standards/js/jcarousel/skins/tango/skin.css" />



<script type="text/javascript">



jQuery(document).ready(function() {

    jQuery('#mycarousel').jcarousel();

});



</script>



<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>

Maik · 12.12.08 13:46

Zitat von Dustin84

Richtig, weil ich den Seitenkopf als externe .php reinlade.

Aha, dann müsste ich ihn ja dennoch in der Browserausgabe des Seitenquellcodes sehen, denn ich rede hiervon - aber ich bin's mittlerweile echt leid, mich hier zu wiederholen.

Ich wünsche Dir einen schönen dritten Advent!

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Fotogalerie in Dreamweaver einbinden

Fotogalerie

Fotogalerie

Fotogalerie - mit AS

PS Elements: Web-Fotogalerie

E-Mail:

Abonnieren Abbestellen