Probleme mit jquery - in HTML/CSS

cocodina · 25.05.2012

Hallo und guten Morgen,
Bereits mehrmals habe ich JS in Form von Slideshows in meinen HTML/CSS-Code eingebunden - aber hier beiße ich mir die Zähne aus.

http://jquerytools.org/demos/scrollable/gallery.html

Ich möchte eine scroll-fähige Slideshow haben, und das angeklickte Bild wird in einem DIV darüber eingeblendet.
Mit den Beispiel-Dateien komme ich aber nicht zurecht, da ich nicht weiß, in welchen DIV die Funktion ausgeführt wird.

HTML:

<!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>Lonsdorfer. Portfolio.</title>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- Hier ist das Script für die Jquery-Library über link  -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/vorlage.css"/>
<link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css"/>
<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css"/>

<!-- Hier ist das Script für die Jquery-Tools über link  -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js">
  // initialize tools.scrollable with configuration variables
  $("#wrap").scrollable({
  keyboard: false,
  circular: true
  });
  
  $(function() {
  // initialize scrollable
  $(".scrollable").scrollable();
});

</script>

und hier der Aufruf:

HTML:

<!--Hier beginnt die Galerie mit Scroll-Effekt-->

<!-- "previous page" action -->
<a class="prev browse left"></a>
 
<!-- root element for scrollable -->
<div class="scrollable" id="scrollable">
 
  <!-- root element for the items -->
  <div class="items">
 
    <!-- 1-5 -->
    <div>
      <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
      <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
      <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
      <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
    </div>
 
    <!-- 5-10 -->
    <div>
      <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
      <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
      <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
      <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
    </div>
 
    <!-- 10-15 -->
    <div>
      <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
      <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
      <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
      <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
    </div>
 
  </div>
 
</div>
 
<!-- "next page" action -->
<a class="next browse right"></a>
</div>

<div id="wrap">
<!-- Aufruf für grosse Vorschau in DIV wrap --></div>
<script>
$(function() {
$(".scrollable").scrollable();

$(".items img").click(function() {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").click();
});
</script>
</div>
<!-- Ende Galerie-->

scrollable-buttons.css

HTML:

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
}

/* right */
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { margin-left: 0px; }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

/* up and down */
a.up, a.down  {
    background:url(vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}

scrollable-horizontal.css

HTML:

/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {
    /* required settings */
    position:relative;
    overflow:hidden;
    width: 550px;
    height:120px;
    /* custom decorations */
    border:1px solid #ccc;
    background:url(h300.png) repeat-x;
    z-index: 99;
}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
    top: 500px;
}

.items div {
    float:left;
    width:680px;
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:20px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}

Lt. Anleitung muß erst die jq-library und dann das tool geladen werden (Head)

Und die beiden CSS würden reichen zur Einbindung -
den div "navi" (wie angegeben) habe ich ebenfalls so benannt.

Da ich nicht erfahren in JS bin (nur Grundkenntnisse, 2-Wochen-Kurs) brauche ich erfahrene Hilfe, wie ich das einbinden kann...

Was mache ich falsch, oder hat jemand ein Beispiel, wie man das anwenden kann...

Danke -

P.S., die Seite ist von einer Freundin, die nur die Slideshow haben wollte... ich bin nicht für die komplette Struktur verantwortlich.

tomz4874 · 25.05.2012

AW: Probleme mit jquery - in HTML/CSS

Wäre schön wenn du den gesamten HTML-Code der Datei posten würdest. Weil einen beginnenden <head>-Bereich der nicht abgeschlossen ist und mit fehlenden <body>-Teil lässt sich der Fehler schlecht finden.
Muss ja nicht immer am JavaScript liegen, kann auch sein das irgendwo ein Tag nicht geschlossen ist usw.

holger2 · 27.05.2012

AW: Probleme mit jquery - in HTML/CSS

da fehlt wohl einiges;-)