Wijziging aanbrengen met lightbox

[afarensis]

Ik weet niet zo goed waar ik deze vraag moet stellen, voorlopig maar even in 'Algemeen'.

Ik realiseer mij dat dit een zeer specifieke vraag is, maar misschien leest iemand dit die toevallig veel kennis heeft van Liightbox...

Op zich werkt de lightbox in www.excluservice.nl goed (afbeelding op eerste pagina), maar ik zou het prettig vinden als de witte achtergrond (die ik later een andere kleur geef) een stukje naar beneden doorloopt, zodat er als het ware een 'gekleurde balk' onder de afbeelding getoond wordt. Maar dat lukt me niet; ik heb wel wat gefröbeld met het CSS bestand, maar het lukt mij niet. Wellicht moet het JS-script aangepast worden, maar daar heb ik zeer weinig kennis van.

Betreft Lightbox2 van Lokesh Dhakar

Wellicht kan iemand mij hierbij helpen.....

Afbeelding van de gewenste vorm/layout

 

[Verwijderd lid 192067]

Dit moet met CSS mogelijk zijn. Probeer eens het volgende aan te passen:

.lb-dataContainer {
    margin: 0px auto;
    padding-top: 5px;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
[COLOR="#FF0000"]    background: #fff;[/COLOR]
}
.lb-outerContainer {
    position: relative;
    background-color: #FFF;
    width: 250px;
    height: 250px;
    margin: 0px auto;[COLOR="#FF0000"]
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;[/COLOR]
}

(in rood mijn aanpassingen)

 

[afarensis]

Bedankt voor je reactie. Maar je tip werkt helaas niet. De 'border-radius' veranderen resulteert in ronde hoeken. En de achtergondkleur aanpassen kan ook in hetzelfde stukje code. Dat werkt wel goed.
Ik had zelf ook al allerlei mogelijke variabelen aangepast; in de meeste gevallen lijkt er overigens niets te gebeuren, maar wel ergens 'onderhuids' neem ik aan.

.lb-outerContainer {
  position: relative;
 [COLOR="#FF0000"] background-color: white;[/COLOR]
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;

}

 

[Verwijderd lid 192067]

Ik had zelf ook al allerlei mogelijke variabelen aangepast; in de meeste gevallen lijkt er overigens niets te gebeuren, maar wel ergens 'onderhuids' neem ik aan.

Waar baseer je dat dan op? Als je iets aanpast en ziet geen resultaat, dan werkt het gewoon niet...

De oorspronkelijke lightbox heeft afgeronde hoeken. De border-radius die ik toevoeg is om de lightbox om de afbeelding aan de bovenkant afgeronde hoeken te geven en aan de onderkant niet, zodat de onderkant goed aansluit op het stuk waar de tekst staat.

En wat gebeurt er als je 'important!' toevoegt aan de door jouw gemaakte wijzigingen? Zie je dan wel resultaat?

 

[afarensis]

Het lijkt erop dat jij een andere versie hebt; zo is '.lb-outerContainer {' bij mij uitgebreider, en heb ik geen: '.lb-dataContainer'.

Ik heb bijvoorbeeld in onderstaande code 'bottom: 100px' toegevoegd, in de hoop dat ik hier iets van zou zien, maar niet dus. Hier wreekt zich mijn onkunde met CSS.

lightbox {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 10000;
	text-align: center;
	line-height: 0;
	font-weight: normal;
	[COLOR="#FF0000"]bottom: 100px;[/COLOR]}

'Important' toevoegen, oei daar ga ik weer.. Waar moet ik dat dan toevoegen? Ik zie het ook nergens anders staan.

 

[Verwijderd lid 192067]

Klopt, ik zat de CSS te bekijken in de inspector van Firefox, maar die geeft blijkbaar niet de volledige CSS-file weer, alleen de CSS voor het betreffende element. Sorry daarvoor.
Ik heb nu het originele CSS-bestand bekeken (http://www.excluservice.nl/css/lightbox.css, hopelijk is dit wel de goede ).

In het CSS-bestand wat ik bekeken heb, staat wel degelijk .lb-DataContainer (regel 146):

.lb-dataContainer {
  [COLOR="#FF0000"]background-color: #FFF;[/COLOR]
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

Voeg bij .lb-dataContainer eens de rode tekst toe zoals hierboven. Deze zou de achtergrond onder de afbeelding (waar de tekst en het kruis om te sluiten staat) wit moeten maken.

Wat je hebt toegevoegd aan .lb-outerContainer (hieronder rood) kan volgens mij weg, de achtergrond is al wit:

.lb-outerContainer {
  position: relative;
  [COLOR="#FF0000"]background-color: white;[/COLOR]
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

'Important' toevoegen, oei daar ga ik weer.. Waar moet ik dat dan toevoegen? Ik zie het ook nergens anders staan.

Laat dat maar even, dat was niet relevant .

Probeer eens of je met bovenstaande wat meer resultaat ziet. Als dat lukt kijken we dan verder naar de volgende stappen.

 

[afarensis]

Bedankt weer voor je hulp....

Nou moet 'ik' sorry zeggen: .ib-dataContainer is er inderdaad. Paar keer overheen gekeken, dom, dom.

Maar, background-color: #FFF; toevoegen geeft een raar effect. De teksten onder het plaatje verschuiven een paar centimter naar links t.o.v. het plaatje. Werkt dus niet goed.

.lb-dataContainer {
  [COLOR="#FF0000"]background-color: #FFF;[/COLOR]  
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

Als ik in .lb-outerContainer { white verander naar een andere kleur, dan gaat het wel goed. Ik had dit al een keer eerder met succes getest, maar kennelijk naar jou toe niet goed aangegeven eerder in het verhaal. Dus dit lijkt dan toch wel de goede plaats.

.lb-outerContainer {
  position: relative;
  [COLOR="#FF0000"]background-color: white;[/COLOR]
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

Maar goed, nu nog 'even' dat witte randje eronder. Lijkt toch lastig te worden.....

En blijft ook lastig als je het zelf niet 'live' kunt testen..

 

[afarensis]

Bedankt weer voor je hulp....

Nou moet 'ik' sorry zeggen: .ib-dataContainer is er inderdaad. Paar keer overheen gekeken, dom, dom.

Maar, background-color: #FFF; toevoegen geeft een raar effect. De teksten onder het plaatje verschuiven een paar centimter naar links t.o.v. het plaatje. Werkt dus niet goed.

.lb-dataContainer {
  [COLOR="#FF0000"]background-color: #FFF;[/COLOR]  
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

Als ik in .lb-outerContainer { white verander naar een andere kleur, dan gaat het wel goed. Ik had dit al een keer eerder met succes getest, maar kennelijk naar jou toe niet goed aangegeven eerder in het verhaal. Dus dit lijkt dan toch wel de goede plaats.

.lb-outerContainer {
  position: relative;
  [COLOR="#FF0000"]background-color: white;[/COLOR]
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

Maar goed, nu nog 'even' dat witte randje eronder. Lijkt toch lastig te worden.....

En blijft ook lastig als je het zelf niet 'live' kunt testen..

Nog even aanvullend voor alle duidelijkheid.

De witte achtergrond (is overigens standaard; was dus al zo) wil ik, als het gaat lukken!, oranje maken (dit is ook een van de bedrijfskleuren van het garagebedrijf). Dat geeft dan ook een goed contrast met de witte letters. Als het lukt en ik ‘laat’ de teksten wit, dan moet ik weer aan de slag met de kleur van de teksten, die vallen dan natuurlijk weg. Dus oranje heeft mijn voorkeur en is dus ook eenvoudig aan te passen. M.u.v. dan van die witte/oranje strook....

 

[Verwijderd lid 192067]

Als ik in .lb-outerContainer { white verander naar een andere kleur, dan gaat het wel goed. Ik had dit al een keer eerder met succes getest, maar kennelijk naar jou toe niet goed aangegeven eerder in het verhaal. Dus dit lijkt dan toch wel de goede plaats.

.lb-outerContainer {
  position: relative;
  [COLOR="#FF0000"]background-color: white;[/COLOR]
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

Klopt, als je de buitenste rand rondom de afbeelding (zoals de lightbox dus nu is) van kleur wilt veranderen, moet dat gebeuren in .lb-OuterContainer. Maar dit stuk neemt niet de balk onder de tekst mee, volgens mij is dat te wijzigen onder .lb-DataContainer.

En blijft ook lastig als je het zelf niet 'live' kunt testen..

Zeker, ik moet het dan ook doen met de Inspector in Firefox. Daarin heb ik nu het volgende gewijzigd:

.lbOuterContainer {
    background-color: orange;
}
.lbDataContainer {
    background-color: orange;
}

(overige waardes niet gewijzigd en ook niet getypt, want dan wordt het zo'n lang stuk code .

Dit ziet op het scherm dan zo uit:


Is dit wat je in gedachte hebt? Als dat zo is, kun je dan eens in het CSS-bestand op de website de aanpassingen maken zoals ik ze heb gedaan in de Inspector in Firefox? Dan kan ik dan evt. nog live kijken wat er verkeerd gaat.

 

[afarensis]

Helemaal goed. Fijn dat je de er nog naar gekeken hebt en dus de oplossing gevonden hebt. Bedankt!!

Staat nu live: http://www.excluservice.nl

Maar... zul je altijd zien, doemt er weer ander probleempje op. de tekst 'afbeelding 1 van ?>' is slecht leesbaar.

Dit is het stukje code in JS (had al eerder hier de engelse tekst 'image 1 of ?' veranderd in Nederlands)

Lightbox.defaults = {
albumLabel: 'afbeelding %1 van %2',
alwaysShowNavOnTouchDevices: false,
fadeDuration: 500,
fitImagesInViewport: true,
// maxWidth: 800,
// maxHeight: 600,
positionFromTop: 50,
resizeDuration: 700,
showImageNumberLabel: true,
wrapAround: false
};

maar het lijkt erop dat de kleur (of intensiteit) niet te veranderen is. Alternatief is om het gewoon maar weg te laten. Ik zie wel...
had er al 'color: #ED6B24' van gemaakt, maar dat werkt niet

Nogmaals hartelijk dank voor de moeite die je genomen hebt om mij te helpen...

 

[Verwijderd lid 192067]

Mooi om te lezen dat het toch nog gelukt is :thumb:! Graag gedaan .

Ook de kleur van het stukje tekst "Afbeelding 1 van ?" is ook te veranderen met CSS. In het CSS-bestand wordt deze tekst opgemaakt met onderstaande code:

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

Als je nu "color: #999999;" verandert in "color: #fff;" zou de kleur moeten veranderen in wit.
Overigens, als je er #ED6B24 van maakt, krijgt de tekst dezelfde kleur als de achtergrond en zie je hem dus helemaal niet .

 

[afarensis]

Nu helemaal perfect!! mooi wit. Omdat toen de witte tekst erboven weer een beetje bleek was, heb ik dat ook veranderd in #FFF.
En van 'dezelfde' kleur, is duidelijk, dan valt het tegen elkaar weg. Maar dit vind ik nu veel fraaier

Ja, jij hebt er toch echt wel veel meer kijk op dan ik. Ik ben deze code al een aantal keren voorbijgescrolld, zonder het te herkennen.

Inmiddels dus aangepast: http://www.excluservice.nl

.lb-data .lb-caption {
  font-size: 15px; /*was 13*/
  font-weight: bold;
  line-height: 1em;
 [COLOR="#FF0000"] color: #FFF; /*toegevoegd*/[/COLOR]}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  [COLOR="#FF0000"]color: #FFF; /*was 999999[/COLOR]*/

Nogmaals dank en het ga je goed.

George

 

[Verwijderd lid 192067]

Top! Graag gedaan :thumb:!