JCarousel mehrspaltig gestalten

[c0s4n0str4]

Hallo alle zusammen.

Ein Kumpel hat mich gebeten eine Gallery für ihn zu erstellen, da er überhaupt keine Ahnung von webseiten hat. Ich kenne mich so einwenig aus und programmiere welche zwischendurch mal.
Ich habe die Bib. JCarousel ins betracht gezogen und schon mal was damit erstellt, was jedoch nicht zu dem gewünschten Ergebniss führt.
Bei JCarousel kann man wohl nur eine Spalte oder eine Zeile gleichzeitig veschieben. Damit meine ich, wenn ich auf button next clicke, verschieben sich die bilder bzw. nur eine Zeile oder Spalte.

Ich würde gerne 3x3 felder erstellen, und immer wenn der button next geklickt wird, sollen 9 felder gleichzeitig verschoben werden und die nächsten 9 angezeigt. Kann man so was mit JCarousel machen?
Ich habe also keine möglichkeite bis jetzt gefunden.

 

[c0s4n0str4]

Also wenn keiner eine Antwort findet, ist kein Problem. Ich programmiere grade eine Gallery selbst die viel besser zu bedienen sein wird . Bei Interesse melden

 

[Gast170816]

Oh, diese Gallery hätte ich aber gern...benötige nämlich auch so eine Slideshow, die mehrere gitterförmig angeordnete Bildchen sliden kann.

Sollte aber doch noch jemand eine Lösung für jCarousel finden, würde ich mich sehr freuen:
Hier http://sorgalla.com/projects/jcarousel/examples/static_simple.html hab ich schon diverses mit Firebug probiert.
Ich kann die DIVs in der Box ganz groß machen und ich kann auch die eine Bilderreihe da breiter machen, aber MEHRzeilig machen geht nicht.
Maximal, wenn ich beim <ul> Höhe und Breite ändere...aber das ist wiederum als inline-Style am Element gemacht...da überschreibt dann immer wieder irgendwas meine Anweisungen. Anweisungen für das <ul> machen bringt also nix.

 

[Gast170816]

So nun hab ich also eine Seite gefunden, wo jemand diese Galerie so verwendet. Ein bisschen *schnippschnapp* und hier hab ich dann mal die CSS-Dateien dazu... ich denke ich hab keine Datei vergessen. JS und Dinge die standardmäßig zu diesem Galerie-PlugIn dazu gehören, müsste sich jeder selbst auf der offiziellen Seite runterladen.
Evtl. Bildlinks in den CSS-Datein stimmt mitunter natürlich nicht, das müsste jeder bei sich anpassen.

jquery.jcarousel.css:

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

skin.css

/* -------------------------------------------- */
/* ------------ LARGE (INDEX PAGE) ------------ */
/* -------------------------------------------- */

.jcarousel-skin-tango .jcarousel-container {
    /*background: #FFF;*/
   	margin-left: 29px; /* IMPORTANT! DO NOT REMOVE! */
	margin-right: 29px; /* IMPORTANT! DO NOT REMOVE! */
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 920px;
    padding-left: 31px;
    padding-right: 49px;
    padding-top: 15px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  935px;
    height: 289px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 308px;
    height: 289px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 5px;
}


.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 120px;
    right: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_right.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 120px;
    left: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_left.png) no-repeat 0 0;
}
    
/* -------------------------------------------- */
/* ------------ SMALL (ABOUT THE STUDIO PAGE) ------------ */
/* -------------------------------------------- */

.jcarousel-skin-tango-small .jcarousel-container {
    /*background: #FFF;*/
   	margin-left: 29px; /* IMPORTANT! DO NOT REMOVE! */
	margin-right: 29px; /* IMPORTANT! DO NOT REMOVE! */
}

.jcarousel-skin-tango-small .jcarousel-container-horizontal {
    width: 920px;
    padding-left: 31px;
    padding-right: 49px;
    padding-top: 15px;
}

.jcarousel-skin-tango-small .jcarousel-clip-horizontal {
    width:  935px;
    height: 140px;
    border-bottom: 1px solid #313131;
    padding-bottom: 15px;
}

.jcarousel-skin-tango-small .jcarousel-item {
    width: 151px;
    height: 136px;
}

.jcarousel-skin-tango-small .jcarousel-item-horizontal {
    margin-right: 5px;
}


.jcarousel-skin-tango-small .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango-small .jcarousel-next-horizontal {
    position: absolute;
    top: 60px;
    right: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_right.png) no-repeat 0 0;
}

.jcarousel-skin-tango-small .jcarousel-prev-horizontal {
    position: absolute;
    top: 60px;
    left: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_left.png) no-repeat 0 0;
}



/* -------------------------------------------- */
/* ------------ Gallery (PORTFOLIO PAGE) ------------ */
/* -------------------------------------------- */

.jcarousel-skin-tango-gallery .jcarousel-container {
    /*background: #FFF;*/
   	margin-left: 29px; /* IMPORTANT! DO NOT REMOVE! */
	margin-right: 29px; /* IMPORTANT! DO NOT REMOVE! */
}

.jcarousel-skin-tango-gallery .jcarousel-container-horizontal {
    width: 920px;
    padding-left: 31px;
    padding-right: 49px;
    padding-top: 15px;
}

.jcarousel-skin-tango-gallery .jcarousel-clip-horizontal {
    width:  935px;
    height: 575px;
    padding-bottom: 10px;
}

.jcarousel-skin-tango-gallery .jcarousel-item {
    width: 151px;
    height: 575px;
}

.jcarousel-skin-tango-gallery .jcarousel-item-horizontal {
    margin-right: 7px;
}

.jcarousel-skin-tango-gallery .jcarousel-item-horizontal img {
    margin-bottom: 10px;
}


.jcarousel-skin-tango-gallery .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango-gallery .jcarousel-next-horizontal {
    position: absolute;
    top: 275px;
    right: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_right2.jpg) no-repeat 0 0;
}

.jcarousel-skin-tango-gallery .jcarousel-prev-horizontal {
    position: absolute;
    top: 275px;
    left: -15px;
    width: 29px;
    height: 54px;
    cursor: pointer;
    background: transparent url(../images/arrow_left2.jpg) no-repeat 0 0;
}

Nichts zu danken. ;-)