Animatie weergave titel over afbeelding

[wpbremer]

Ik ben al een tijdje opzoek naar een mogelijkheid om een slideshow van afbeeldingen te tonen waarbij bij het wisselen van de afbeeldingen automatisch vanuit de linkerkant de titel van de afbeelding naar binnen slide.

Hiervoor heb ik gezocht op de jQuery site, maar kan het niet zo snel vinden, misschien heeft iemand van jullie dit reeds ergens gebruikt.

[Jos]

Zoiets? http://www.serie3.info/s3slider/demonstration.html

[Rolf]

Wellicht komt deze in de buurt...
http://dev.cmsmadesimple.org/projects/simpleslider

Rolf

[wpbremer]

Ja alleen dan zou ik 1 regel vanuit links willen laten insliden:

Via volgende link heb ik een .jpg staan waar je ongeveer kunt zien wat ik wil realiseren, ik heb het bijvoorbeeld op de rabobank-site gezien.
http://www.wpbremer.nl/uploads/images/D ... 20copy.jpg

Het gedeelte met "De Vliegende Hollander" wil ik dan laten sliden.

[wpbremer]

Wellicht komt deze in de buurt...
http://dev.cmsmadesimple.org/projects/simpleslider

Rolf

Dit is hem niet, het zou wel gemakkelijk zijn indien de slide gelijk een link wordt naar de desbetreffende strip/uitgave.

[Rolf]

Dit is hem niet, het zou wel gemakkelijk zijn indien de slide gelijk een link wordt naar de desbetreffende strip/uitgave.

SimpleSlider komt van onderen, maar heeft wel een link optie.
Wellicht kun je het sjabloon aanpassen... ?

Maar uhh. Mooi plaatje!!
Je bent goed bezig, geloof ik 

Rolf

[wpbremer]

Tnx, fijn dat je mijn nieuwe opzet mooi vind. Ik zal eens in het sjabloon kijken of het aan te passen is.

[wpbremer]

Wellicht komt deze in de buurt...
http://dev.cmsmadesimple.org/projects/simpleslider

Rolf

Ik heb hem geïnstalleerd maar krijg hem niet werkend.

Dacht probeer hem eerst in default werkend te krijgen en dan proberen aan te passen naar mijn wensen, maar dan moet ik hem wel eerst werkend krijgen.

http://test.wpbremer.nl/test-simple-slider

[wpbremer]

Ok hij doet het, had het verkeerde s3slider.js bestand gebruikt.

Nu nog uitvinden hoe ik de slide veranderen kan van onderen naar links.

[wpbremer]

Ok en nu loop ik vast, wat zou ik moeten aanpassen om de titel niet aan de onderkant in te laten sliden, maar juist aan de linkerkant.

Kom in de s3Slider.js wel diverse bewoordingen van SlideUp en SlideDown tegen, maar weet totaal niet wat ik in dit bestand zou moeten aanpassen. Kan iemand die meer verstand van js heeft mij opweg helpen, of moet ik ergens anders iets aanpassen?

[wpbremer]

Ok ben weer een stukje verder, heb de look aangepast en de titel slide nu aan de rechter onderzijde binnen.

Voorbeeld: http://test.wpbremer.nl/test-simple-slider

Ik heb er nu drie afbeeldingen in staan en de eerste keer dat ze getoond worden gaat perfect, alleen vind ik dat de fade in fade out beter kan.

Nadat alle drie de afbeeldingen geweest zijn, slide de titel niet meer van onder in, deze staat er reeds. Daarnaast gaat bij de eerste twee afbeeldingen de fade-in en fade-out ineens veel sneller. Hoe dit op te lossen.

Misschien vind ik het zelfs wel mooier dat de titel rechtsonderin te voorschijn komt.
Ik heb al geprobeerd om de SlideUp en SlideDown te veranderen in SlideLeft en SlideRight, maar dat leverde helaas niks op.

[Jos]

Werner Wiebren vroeg of dit ook via de Gallery module te realiseren is... en dat kan  8)  zie bijgaande xml die je bij de Gallery templates kunt uploaden.

Ik ga hier uit van de titel aan de onderkant. Merk op dat de miniatuurafmetingen zijn ingesteld op 400x300 en dat de template alleen van de miniaturen gebruik maakt.

[wpbremer]

Werner vroeg of dit ook via de Gallery module te realiseren is... en dat kan    zie bijgaande xml die je bij de Gallery templates kunt uploaden.

Ik ga hier uit van de titel aan de onderkant. Merk op dat de miniatuurafmetingen zijn ingesteld op 400x300 en dat de template alleen van de miniaturen gebruik maakt.

Hoi Jos, het is Wiebren ipv Werner, maar dat vergeef ik je hoor  wat een snelle service zeg toppie.

1 foutje kom ik tegen en dat is wanneer de je slideshow ziet dan toont hij nog de

• punt voor de afbeeldingen.
  
  Verder zal ik vanavond eens kijken of ik hem geheel naar eigen smaak kan maken.
  
  dank dank dank
  Groet Wiebren

[wpbremer]

1 foutje kom ik tegen en dat is wanneer de je slideshow ziet dan toont hij nog de

• [li] punt voor de afbeeldingen.

Opgelost, in de css-stylsheet moet het volgende:
[/list]

Code: Select all

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

verander worden door:

Code: Select all

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: block; /* important */
}

[wpbremer]

Het lijkt erop dat s3Slider wel een fade-out heeft maar geen fade-in, klopt dit?

En het is nog steeds zo dat wanneer alle images zijn geweest in de slideshow, de slideshow ineens versneld.

Dit is wat ik nu heb: http://test.wpbremer.nl/