Skip to main content

Welkom bij Joomla!NL

Om alle mogelijkheden van dit forum te kunnen gebruiken, moet je je eerst registreren.

Vermeld in iedere vraag duidelijk:
  1. De versie van Joomla! 3.X die je gebruikt
  2. De volledige url van je website indien mogelijk.
  3. De versie van de extensie waar de vraag over gaat.

slideshow met als overlay een deels transparante .png

slideshow met als overlay een deels transparante .png

12 mrt 2015 23:08
#1
Hallo forumleden,

Voor een J3 site zoek ik een slideshow extensie waarbij het mogelijk is om een transparante .png als overlay te gebruiken.
Helemaal geweldig als dit ook nog eens responsive is. Eventeel met overrides te bereiken ook geen probleem, maar beetje hulp in juiste richting is zeker welkom. Iemand goede tips?

Mvg, Erik.
  • T-cue
  • T-cue's berichtenfoto Heeft onderwerp gestart
  • Nieuw op Joomla!NL
  • Nieuw op Joomla!NL
  • Berichten: 8

slideshow met als overlay een deels transparante .png

13 mrt 2015 10:26 - 13 mrt 2015 10:26
#2
Wat bedoel je precies? Je zou ook een aangepaste html module op dezelfde positie kunnen zetten, er een module class suffix aan toe kunnen voegen en deze met css op de juiste plaats kunnen zetten. Maar dat kan alleen als je maar 1 .png bestand wilt tonen.
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37399

slideshow met als overlay een deels transparante .png

14 mrt 2015 13:17
#3
Beste Astrid,

Bedankt voor je reactie. Dit is misschien wel een goed idee. Het is mijn bedoeling om 1 .png als aangepaste border over de slideshow te zetten. de border zal groter zijn dan de slideshow. Zeg border image 100% en de slideshow er achter 80% qua grootte, maar de boel moet dan niet ten opzichte van elkaar gaan verschuiven op moment dat je kleinere schermen krijgt. (vandaar het responsive verhaal). De bedoeling is dat de .png dus deels over de slideshow valt met een overloop naar de rest van de template. Zie als voorbeeld de foto op de site van Amstel.nl in het scherm direct na de leeftijdscheck. Dit is puur een achtergrond, maar ik wil iets soortgelijks maken, maar dan met een slideshow funktie. Het zou natuurlijk kunnen met animated gif, maar die foto's moeten makkelijk door een derde worden aangepast zonder gelijk te moeten photoshoppen. Vandaar het idee van een slideshow met een soort van overlay, maar hoe is dit het beste aan te pakken. Ik zat te denken om bijvoorbeeld een JSN Imageshow te pakken als basis en hier een theme voor aan te passen. Maar ik weet even niet goed hoe ik dan de theme moet aanpassen. Misschien ideeën? Alvast bedankt voor het meedenken.

Mvg, Erik.
  • T-cue
  • T-cue's berichtenfoto Heeft onderwerp gestart
  • Nieuw op Joomla!NL
  • Nieuw op Joomla!NL
  • Berichten: 8

slideshow met als overlay een deels transparante .png

14 mrt 2015 15:22
#4
Als ik begreep waar je heen wilde, dan had ik misschien een oplossing. Maar een border maak je met css en padding, dus daar zie ik het nut niet in van een transparante afbeelding. Weet je zeker dat je het in de juiste richting zoekt?
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37399

slideshow met als overlay een deels transparante .png

14 mrt 2015 15:55 - 14 mrt 2015 16:02
#5
Misschien denk ik te simpel hoor .. maar toch mijn idee:

als je de css van je slideshow hebt, kun je die kopiëren en dan de optie :after gebruiken om er een aangepaste PNG overheen te plaatsen zoals in mijn voorbeeld

http://http://www.hielke.net/test/overlay.html

HTML
Code:
<html> <head> <title>Testtitel</title> <link rel="stylesheet" type="text/css" href="opmaak.css"> </head> <body> <div id="container"> <div class="slideshow"></div> </div> </body> </html>

CSS
Code:
.container { position:relative; } .slideshow { height: 200px; background-image: url('http://hielke.net/test/slideshow.png'); background-repeat: no-repeat; } .slideshow:after{ content: ""; display: block; width: 100%; height: 100%; background: url('http://hielke.net/test/slideshow-overlay.png'); background-repeat: no-repeat; }

Resultaat

Voor



Na

Managing partner Nederland - Pixlogix.com
(KVK / CIN: U72200GJ2014PTC081526)
Ons team heeft meer dan 15 jaar ervaring in oplossingen op maat!
  • hielkio
  • hielkio's berichtenfoto
  • Regelmatige bezoeker van Joomla!NL
  • Regelmatige bezoeker van Joomla!NL
  • Berichten: 299
Moderators: JelleRomke
Tijd voor maken pagina: 0.643 seconden
Gemaakt door Kunena

Wil je Joomla!NL steunen?

Steun Joomla!NLAlle teamleden werken enthousiast, op vrijwillige basis, mee aan Joomla!NL. Maar een website met forum kost nu eenmaal geld. Dus als je Joomla!NL wilt steunen, dan kan dat, graag zelfs!

Lees hier meer informatie