jQuery Plugin Crossslide anpassen

[Jan-Frederik Stieler]

Hallo,
ich baue gerade das jQuery Cossslide Plugin in meine Seite ein.
Was mich nun stört ist das ich die Bilder nciht über ein normales IMG-Element mit ID/Klasse einbinde sondern das die Bilder in der Konfiguration des Plugins über src eingebunden und die IMG-Elemente per jQuery erzeugt werden.
Ich hab mir dsa Plugin angeschaut und auch gesehen wo das Ganze erzeugt wird nur hab ich jetzt keine Ahnung wie ich das umgemodelt werden soll. Das ist echt krass kompex .
Das Script kommt in einem CMS zum Einsatz und deswegen wäre es super wenn ich die Bilder auch sehen könnte bzw. auch noch verwenden könnte wenn JS deaktiviert ist.

Ein Gedanke war das ich das Plugin ansich ja in ruhe lassen kann und das Array mit den Einstellungen für die Bilder verändern könnte.
Vielleicht kann mir da ja jemand konzeptionell unter die Arme greifen.

Viele Grüße

 

[Matthias Reitinger]

Hallo,

mach es doch einfach so:

<div id="gallery">
  <img src="bild1.jpg" />
  <img src="bild2.jpg" />
  <img src="bild3.jpg" />
</div>

$(function() {
  var imgs = $('#gallery img');
  $('#gallery').crossSlide({ sleep: 2, fade: 1 }, imgs);
});

Grüße,
Matthias

 

[Jan-Frederik Stieler]

Hallo Matthias,
so habe mal wieder Zeit gefunden mich mit diesem Problem zu beschäftigen .
Da ich gerne alle Bilder mit unetrschiedlichen Einstellungen versehen möchte habe ich die erweiterten Funktionen eingebaut. Leider funktioniert das Script so nicht.

$(document).ready(function() {
        $(function() {
            var bild01 = $('#slideshow img#bild01');
            var bild02 = $('#slideshow img#bild02');
            var bild03 = $('#slideshow img#bild03');
            $('#slideshow').crossSlide({fade: 1},[
                ({from: '100% 80% 1x', to: '100% 0% 1.7x', time: 3}, bild01),
                ({from: '100% 80% 1x', to: '100% 0% 1.7x', time: 3}, bild02),
                ({from: '100% 80% 1x', to: '100% 0% 1.7x', time: 3}, bild03)
            ], function(idx, img, idxOut, imgOut) {
                if (idxOut == undefined)
                {
                    // starting single image phase, put up caption
                    $('div.caption').text(img.alt).animate({ opacity: .7 })
                        }
                        else
                        {
                        // starting cross-fade phase, take out caption
                        $('div.caption').fadeOut()
                        }
                        });
                });                    
            });

Ich habe das Gefühl dass das Problem beim Array liegt. Ich weiß jetzt leider nicht ob das Plugin die Konstellation erlaubt die da fabriziert habe. Vielelicht fällt dir dazu noch was ein?

Viele Grüße

 

[Quaese]

Hi,

versuch mal die Bildquelle über das Bildobjekt übergeben.

{src: bild01.attr('src'), from: '100% 80% 1x', to: '100% 0% 1.7x', time: 3}

Ciao
Quaese

 

[Jan-Frederik Stieler]

Hallo Quase,
kannst du mir vielleicht etwas näher erläutern was dies

src: bild01.attr('src')

bewirkt? Ich kann mir das vom Verständnis her noch nicht ganz erklären.

Viele Grüße

 

[Quaese]

Hi Jan-Frederik,

ich habe mich einfach an die Notation auf der PlugIn-Seite (CrossSlide) gehalten. Dort wird einer src-Eigenschaft die Bildquelle zugewiesen. Genau das wird durch das von dir genannte Codefragment erreicht.

Ciao
Quaese