Post by sjoerdd87 » Fri Aug 12, 2016 2:34 am

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!
Last edited by sjoerdd87 on Fri Aug 12, 2016 4:37 pm, edited 1 time in total.

New member

Posts

Joined
Tue Feb 11, 2014 8:48 pm

Post by victorj » Fri Aug 12, 2016 4:18 am

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.

Koeltechnische deurrubbers eenvoudig online op maat bestellen.
Alle niet stekplichtige onderdelen zoals scharnieren, sloten, randverwarming en verlichting voor alle typen koelingen en vriezers.
https://koelcel-onderdelen.com

Koeltechnische deurrubbers eenvoudig online op maat bestellen.
Eigen productie en snelle levering.
https://123-deurrubbers.com


User avatar
Expert Member

Posts

Joined
Sat Jun 25, 2011 4:09 am
Location - Alkmaar Holland

Post by sjoerdd87 » Fri Aug 12, 2016 4:32 am

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.

New member

Posts

Joined
Tue Feb 11, 2014 8:48 pm

Post by tverheijen » Fri Aug 12, 2016 5:02 am

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

Active Member

Posts

Joined
Tue Sep 20, 2011 3:19 am

Post by sjoerdd87 » Fri Aug 12, 2016 4:32 pm

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!

New member

Posts

Joined
Tue Feb 11, 2014 8:48 pm
Who is online

Users browsing this forum: No registered users and 3 guests