Antworten auf deine Fragen:
Neues Thema erstellen

Tipps gesucht: Image-Slider

lachender_engel

Aktives Mitglied

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

Posting-Frequenz: 14µHz

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
Code:
$(".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

Aktives Mitglied

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
Code:
$(".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

Posting-Frequenz: 14µHz

AW: Tipps gesucht: Image-Slider

In der Demo machst du das falsch. Wenn ich
nach der Initialisierung von slider.js
schreibe, meine ich:
Code:
<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

Aktives Mitglied

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

Aktives Mitglied

AW: Tipps gesucht: Image-Slider

Ich denke, ich habe jetzt die Lösung für den fehlenden Link.
Im CSS hab eich die Zeile
HTML:
.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

Posting-Frequenz: 14µHz

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.472
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben