Tipps gesucht: Image-Slider

[lachender_engel]

AW: Tipps gesucht: Image-Slider

Ne, daran kann es nicht liegen.
Ich habe eine minimale Umgebung online gebracht:
Wenn Du Dir das mit Firebug anschaust findest Du im DIV slide-image die Zeile:

<img src="imagesSlider/Banner_03.png" style="display: none;">

Dieser Style wird beim Aufruf der Seite dynamisch erzeugt. Ich kann in der slider.js dazu keinen Eintrag finden.
Hast Du eine Idee, wo so etwas her kommt?!

 

[Duddle]

AW: Tipps gesucht: Image-Slider

Okay, das Problem ist erkannt: sobald du Übergänge machst, die nur im <canvas>-Element funktionieren, schaltet er intern um und rendert alle Bilder direkt in dem Element statt die <img>-Tags ein- und auszublenden.

Da dafür aber auch alle <img>-Elemente ausgeblendet werden, hat das <a>-Element keine Kinder mehr, um die es sich legen kann; die Fläche zum Anklicken ist nicht mehr da. Ausnahme ist, wenn du den Slides eine Beschreibung gibst - diese ist dann anklickbar.

Wie das Problem jetzt auf eine saubere Art zu bannen ist, fällt mir noch nicht ein. Ein Hotfix wäre wohl, erstmal nur CSS-Übergänge zu nutzen.

Alternativ kannst du auch das "display:none" bei allen img-Tags entfernen, aber ich weiß nicht wie sich das mglw. auf die Positionierung oder Browser-Kompatibilität auswirkt. Du könntest dafür mit jQuery ein

$(".slide-image img").show();

nach der Initialisierung von slider.js abfeuern.

Ansonsten müsste man wohl genauer in den Code reinschauen. Ich werde mal in ein paar Tagen nochmal drüber schauen, wenn die Ansätze nicht ausreichen.


Duddle

 

[lachender_engel]

AW: Tipps gesucht: Image-Slider

Danke, Duddle, dass Du Dir das angeschaut hast.

Wie das Problem jetzt auf eine saubere Art zu bannen ist, fällt mir noch nicht ein. Ein Hotfix wäre wohl, erstmal nur CSS-Übergänge zu nutzen.

Das habe ich dann jetzt auch erst Mal gemacht.

Alternativ kannst du auch das "display:none" bei allen img-Tags entfernen, aber ich weiß nicht wie sich das mglw. auf die Positionierung oder Browser-Kompatibilität auswirkt. Du könntest dafür mit jQuery ein

$(".slide-image img").show();

nach der Initialisierung von slider.js abfeuern.

Habe ich gemacht, klappt aber nicht.
Das kleinere Übel ist es dann jetzt erst Mal auf den Slide-Effekt zu verzichten, damit das überhaupt mal läuft.
Wenn Du Lust und Zeit hast mal nach einer anderen Lösung zu schauen, wäre das toll. Muss aber erst Mal nicht sein.
Danke und schöne Grüße!

 

[Duddle]

AW: Tipps gesucht: Image-Slider

In der Demo machst du das falsch. Wenn ich

nach der Initialisierung von slider.js

schreibe, meine ich:

<script type="text/javascript">

	    $(document).ready(function() {
		var slider = new Slider($('#container'));
		var jsonObjekt = [
	{ "src": "imagesSlider/Banner_03.png" , "link": "http://www.avm.de"},
	{ "src": "imagesSlider/Banner_04.jpg" , "link": "http://www.avm.de"}
		];
		slider.setPhotos(jsonObjekt);
		slider.setSize(938, 572);
		slider.setDuration(4000);
		slider.setTheme('theme-embed'); 
		slider.setTransition('transition-opacity');
		slider.setTransitionFunction(SliderTransitionFunctions.squares);
                [B]$(".slide-image img").show();[/B]
	    });

</script>

Der Slider / alles was in dem Bereich von "$(document).ready(function() {" ist wird erst geladen wenn der Rest der Seite fertig ist.


Duddle

 

[lachender_engel]

AW: Tipps gesucht: Image-Slider

In der Demo machst du das falsch. Wenn ich schreibe, meine ich:[...]
Der Slider / alles was in dem Bereich von "$(document).ready(function() {" ist wird erst geladen wenn der Rest der Seite fertig ist.

Ja, stimmt. In der Demo hast Du meinen letzten Versuch gesehen.
Ich habe das auch so probiert, wie Du es jetzt vorgeschlagen hast (siehe Demo jetzt). Dennoch funktioniert der Link auf dem Image nicht.

 

[lachender_engel]

AW: Tipps gesucht: Image-Slider

Ich denke, ich habe jetzt die Lösung für den fehlenden Link.
Im CSS hab eich die Zeile

.slide-image a {position:absolute; display:block; z-index:1; width:938px; height:572px;}

eingefügt und es klappt jetzt ;-)
Was meinst Du, Duddle. Ist das eine halbwegs saubere Lösung?!
Zumindest klappt das bei mir auf dem IE, FF und Chrome.

 

[Duddle]

AW: Tipps gesucht: Image-Slider

Naja, es trifft nicht den Herz des Problems - aber wenn du damit leben kannst und diesen Style für deinen Nachfolger gut dokumentierst, passt es natürlich.


Duddle