divs over images goedzetten
Ik ben met Flickr bezig een fotoalbum op mijn website te krijgen. Nu wil ik graag wat tekst over de foto zetten zodat je via deze foto als link het album kunt openen. Helaas krijg ik mijn div's niet goed uitgelijnd over de foto. Kan iemand mij hier mee op weg helpen? Ik wil zo weinig mogelijk vaste breedtes/hoogtes gebruiken.
Dit is wat ik nu heb:
http://jsfiddle.net/em4o44xh/
Op deze pagina staat een test:
http://www.zscwesterhoven.nl/fotostest.php
Tis een goede gedachte maar niet correct.
Dit is correct.
http://jsfiddle.net/em4o44xh/3/
Dit heb je super gemaakt! Werkt goed.
Ik heb alleen 1 klein ding, namelijk als mijn description langer is maakt hij mijn div te breed. Mijn div moet eigenlijk niet groter zijn als mijn image (150x150). Kan ik dit oplossen zonder vaste breedte mee te geven? Of is dit niet erg om een vaste breedte mee te geven? (ivm browser/mobiel compatible)
Natuurlijk kan dit. Wat houd je tegen ;)
Wat is je aanraadt is de div een vaste breedte te geven zodat deze niet verder kan oprekken dan jij aangeeft.
En ook zou ik dit doen met percentages, dit ivm responsiveness.
Eerst zelf proberen natuurlijk en daarna gaan we je helpen als je met wat antwoorden komt :)
Ik zat dus inderdaad te twijfelen hoe dat op te lossen met responsive. Ik ga nu met percentages aan de slag.
Ook heb ik nu 2 coverlayers gemaakt, maar ze komen allebei van onder naar boven ingeschoven. Ben nog aan het kijken of ik er 1 van boven naar onder kan laten schuiven.
Toevoeging op 26/05/2015 11:46:26:
Ik heb het nu zo dat de breedte 12% is. Maar als ik nu mijn browser verklein, worden de foto's kleiner (dat is goed). Maar dan komen mijn coveroverlay's buiten de foto te liggen.
Wat kan ik hier nog in aanpassen?
Je zal dus gebruik moeten maken van media-queries. Linkje
Doe ook gelijk als je iets hebt geprobeerd ofzo een nieuwe update van je JS-fiddle. Dan kan ik en andere developers zien wat je hebt gedaan en geprobeerd, dan kunnen we je juiste richting insturen want je doet het zo te horen netjes.
Toevoeging op 26/05/2015 12:40:34:
Heb trouwens gezien hoe je het hebt gedaan op je live voorbeeld.
Netjes kerel!
Ik had alleen een andere naam gebruikt i.p.v overlayA en overlayB.
.coveroverlayTop en .coveroverlayBottom
Ook leuk hoe je mijn voorbeeld hebt opgepakt en hier een tweede bij hebt gezet.
Wat je nu nog te doen staat is op maat van het scherm dit aan te passen of vastzetten zodat het altijd 150px x 150px is.
Makkelijkste oplossing is natuurlijk het 150x150 concept. Met percentages moet je veel queries maken en checken of het netjes werkt.
Wat ook een goede oplossing is:
Twitter Bootstrap, Linkje
En de HTML die erbij hoor is dan dit;
http://jsfiddle.net/em4o44xh/4/
Zit namelijk met mijn api key dat ik het niet zomaar op jsfiddle kan zetten denk ik.
Ik heb nu even een vaste breedte gekozen, daar ik de hele site nog een keer aan wil pakken om hem responsible te maken, en mijn fotoalbum script nog veel verder uitgewerkt moet worden.
Ik zit nu nog met 2 dingen:
1) De tekst in de overlay loopt buiten de div (opgelost; kwam door de padding)
2) Met mijn query's krijg ik de albums niet in de goede volgorde. Kan ik hier iets mee met de AJAX-requests (met each loop lijkt de ene sneller binnen te zijn als de andere)?
Gewijzigd op 26/05/2015 13:46:46 door D B
De tekst die uit de div loopt is een vervelend probleem maar kan je alleen maar met JS oplossen denk ik om te kijken dat de tekst niet meer dan een x aantal tekens is.
Verder weet ik niet hoe je het met JS moet doen, heb ook een Flickr API Library gemaakt in Codeigniter om te kunnen comminuceren met Flickr en mijn systeem.
http://www.tvmoordrecht.nl/fotoalbum
Hier verwijs ik niet naar Flickr maar worden de foto's opgehaald en getoond op de website.
Tekst heb ik opgelost, was ik ook hierboven aan aan het passen :P (Maar inderdaad hele lange woorden moet ik gewoon niet gebruiken)