Page 1 of 1
Afbeelding popup (lightbox) OPGELOST
Posted: Fri Aug 12, 2016 2:34 am
by sjoerdd87
Hallo allemaal,
Ik heb op mijn webshop Versie 2.3.0.2 .png afbeeldingen in gebruik, echter hebben deze geen achtergrond.
Zodra ik nu op een afbeelding klik en hem vergroot komt er een grijze waas over de afbeelding kleurcode #444444 maar dit wil ik veranderen, in mijn stylesheet komt 2x deze kleurcode voor en beide heb ik gewijzigd.
Helaas zonder resultaat, ik denk dat dit ergens in een JS script staat maar zou niet weten waar, welke module zorgt ervoor dat de afbeelding als "lightbox" tevoorschijn komen dan kan ik hier eens naar opzoek.
Kan iemand me hiermee helpen?
Alvast bedankt!
Re: Afbeelding popup (lightbox)
Posted: Fri Aug 12, 2016 4:18 am
by victorj
Gebruik nooit png afbeeldingen maar altijd jpg.
Ten eerste is jpg veel beter te optimaliseren dan png en er gebeuren weinig onverwachte dingen.
heb je alleen png bestanden, dan kun je die heel eenvoudig omzetten naar jpg met het programma riot (radical image optimizer) en tegelijk optimaal comprimeren.
Alle plaatjes die je ziet op de website, zijn opgeslagen in de map cache in de image folder, dus heb je wat gewijzigd, dan zie je nog steeds het oude plaatje.
je zult dus alle bestanden in de map cache moeten verwijderen, in e map cache tref je dezelfde mappen aan als in je image map waar je naar hebt geupload.
hierna worden de plaatjes opnieuw geschreven met de nieuwe eigenschappen.
Re: Afbeelding popup (lightbox)
Posted: Fri Aug 12, 2016 4:32 am
by sjoerdd87
victorj wrote:Gebruik nooit png afbeeldingen maar altijd jpg.
Ten eerste is jpg veel beter te optimaliseren dan png en er gebeuren weinig onverwachte dingen.
heb je alleen png bestanden, dan kun je die heel eenvoudig omzetten naar jpg met het programma riot (radical image optimizer) en tegelijk optimaal comprimeren.
Alle plaatjes die je ziet op de website, zijn opgeslagen in de map cache in de image folder, dus heb je wat gewijzigd, dan zie je nog steeds het oude plaatje.
je zult dus alle bestanden in de map cache moeten verwijderen, in e map cache tref je dezelfde mappen aan als in je image map waar je naar hebt geupload.
hierna worden de plaatjes opnieuw geschreven met de nieuwe eigenschappen.
Ja van de cache wist ik inderdaad, maar aangezien ik het nooit zo mooi vond met een achtergrond had ik besloten om png afbeeldingen te gebruiken.
De cache wis ik regelmatig als ik wat heb aangepast, ook voor het testen van het watermerk wat me nog niet lukt (zie andere topic) moet dit gebeuren.
Bedankt voor je hulp en ik zal eens kijken wat ik aan de afbeeldingen kan doen.
Re: Afbeelding popup (lightbox)
Posted: Fri Aug 12, 2016 5:02 am
by tverheijen
Zoek dit op! in ..../javascript/jquery/magnific/magnific-popup.css
Code: Select all
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
voeg daar een achtergrond kleur toe...
succes
./Thomas
Re: Afbeelding popup (lightbox)
Posted: Fri Aug 12, 2016 4:32 pm
by sjoerdd87
tverheijen wrote:Zoek dit op! in ..../javascript/jquery/magnific/magnific-popup.css
Code: Select all
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
voeg daar een achtergrond kleur toe...
succes
./Thomas
Hoi Thomas,
Helaas werkte dit niet, maar nu weet ik wel waar ik moest zoeken, de oplossing was:
Code: Select all
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444444; }
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px; }
Hier heb ik de background: #444444; veranderd in background: #ffffff;
Bedankt voor de hulp!