Alternatief voor Shadowbox

Status
Niet open voor verdere reacties.
A

afarensis

Verenigingslid
Lid geworden
12 jul 2011
Berichten
607
Besturingssysteem
Windows 11
Office versie
365
Ik weet niet zo goed waar ik deze vraag moet stellen, voorlopig maar even in 'Algemeen'.

Ik werk al een tijdje met Shadowbox, werkt op zich prima, maar lijkt nauwelijks nog ondersteund te worden en al zeker niet meer bijgewerkt /verder ontwikkeld....

Mijn vraag is dan ook: kan iemand mij een goede plaatsvervanger adviseren. Heb al even gegoogled, maar zie door de bomen het bos even niet. Iedereen prijst natuurlijk zijn eigen werk aan.
Liefst een beetje eenvoudig; ik ben een amateurtje en gebruik het alleen maar omdat het leuk is.

George
 
Beiden bedankt voor de url naar uitleg over de programma's. Zien er op het eerste gezicht vrij complex uit, maar ik duik er de komende dagen in en zie wel of het mij lukt.
Ik ga ook nog eens zoeken naar Nederlandstalige handleidingen en/of voorbeelden.
 
afarensis zei:
Beiden bedankt voor de url naar uitleg over de programma's. Zien er op het eerste gezicht vrij complex uit, maar ik duik er de komende dagen in en zie wel of het mij lukt.
Ik ga ook nog eens zoeken naar Nederlandstalige handleidingen en/of voorbeelden.
Klik om te vergroten...
Complex, mwah.... niet als je de samples even goed bekijkt.
;)
 
Ik ben met Lightbox aan de slag gegaan en omdat het veel overeenkomsten heeft met Shadowbox, lijkt het inderdaad mee te vallen..

Maar… het is met toch ‘nog’ niet gelukt om het aan de praat te krijgen… Misschien heb ik ergens gewoon een domme fout gemaakt..

Ik zal aangeven wat ik inmiddels heb gedaan, en wellicht wil iemand de moeite nemen er even met een vakkundige blik naar te kijken en mij wat aanwijzingen te geven.

Dit zijn de mappen waar ik de bestanden in heb gezet:
De padaanduiding is juist (dit werkt bij Shadowbox ook goed)
lightbox css in map: ../css/lightbox.css
lighbox.js in map: ../javascript/lightbox.js

Dit tussen de head-tags gezet:
<link rel="stylesheet" type="text/css" href="../css/lightbox.css" media="screen" />
<script type="text/javascript" src="../javascript/lightbox.js">
</script>

En dit in het HTML-gebied:
<p>Klik <a href="../darwin/plaatjes/darwin-31-jaar.jpg" rel="lightbox" title="Darwin op 31-jarige leeftijd">hier</a> voor een schilderij van Darwin op 31 jarige leeftijd en <a href="../darwin/plaatjes/emma-darwin.jpg" rel="lightbox" title="Emma Darwin Wedgwood">hier</a> voor een gelijktijdig geschilderd portret van zijn echtgenote (en nicht) Emma Darwin-Wedgwood (ja... inderdaad, van de beroemde Wedgwood serviezen).</p>

Merkwaardig is dat wel de techniek van (de er nog in staande code) van shadowbox (stukje hoger) gebruikt wordt.

In lightbox.css de plaats van de plaatjes aangepast. De plaatjes (4 stuks) staan dus in de map ../plaatjes/lightbox.

body:after {
content: url(../plaatjes/lightbox/close.png) url(../plaatjes/lightbox/loading.gif) url(../plaatjes/lightbox/prev.png) url(../plaatjes/lightbox/next.png);
display: none;
}

In de map ‘js’ van de installatiebestanden staan nog een aantal bestanden, zoals:
Lightbox.min, ligtbox-plus-jquery.min, enz… Geen idee wat ik ermee kan, maar wellicht hoef ik die ‘op mijn niveau’ ook helemaal niet te gebruiken, het lijken bestanden om ‘later’ wijzigingen aan te brengen.

Dit is overigens mijn site www.lucyonline.nl en betreffende pagina is: http://www.lucyonline.nl/darwin/darwin.htm
 
Excuus, het pad moet zijn :http://www.lucyonline.nl/javascript/lightbox/lightbox.js

Oei, de UIkit gebruik ik? Sorry, ik ben me hier niet van bewust. Is dat belangrijk voor mij? Hier wreekt zich mijn geringe kennis.

En de plaatjes zijn 'darwin-31-jaar.jpg' en 'emma-darwin.jpg'. Ik meen dat hiervoor onderstaand deel uit de de HTML duidelijk genoeg was. Maar kennelijk begreep ik dat niet goed. In shadowbox werkt het overigens wel goed

En dit in het HTML-gebied:
<p>Klik <a href="../darwin/plaatjes/darwin-31-jaar.jpg" rel="lightbox" title="Darwin op 31-jarige leeftijd">hier</a> voor een schilderij van Darwin op 31 jarige leeftijd en <a href="../darwin/plaatjes/emma-darwin.jpg" rel="lightbox" title="Emma Darwin Wedgwood">hier</a> voor een gelijktijdig geschilderd portret van zijn echtgenote (en nicht) Emma Darwin-Wedgwood (ja... inderdaad, van de beroemde Wedgwood serviezen).</p>
 
Antwoord

Je gebruikt een andere lightbox dan die van UIKit.

In ieder geval heb je in de bron van je pagina de verwijziging niet goed staan:

HTML: 
<link rel="stylesheet"  type="text/css" href="../css/lightbox.css" media="screen" />
<script type="text/javascript" src="../javascript/lightbox.js">
</script>

Moet dan in ieder geval zijn:

HTML: 
<link rel="stylesheet"  type="text/css" href="../css/lightbox.css" media="screen" />
<script type="text/javascript" src="../javascript/lightbox/lightbox.js">
</script>

Ga je die shadowbox ook blijven gebruiken? Anders zou ik eerst die elimineren en daarna het alternatief implementeren. Dat voorkomt mogelijk onderlinge conflicten.

Ik zit ook op de site te kijken van de maker en het script maakt gebruik van JQuery, dus die moet je ook meenemen. De maker geeft aan dat er een combinatiefile bij de download zit, dus in plaats van lightbox.js moet je meenemen lightbox-plus-jquery.js (en di enatuurlijk op je server zetten).
 
Laatst bewerkt:
We zijn een flinke stap verder. Ik heb lightbox.js vervangen door lightbox-plus-jquery.js en zie de plaatjes nu (heb ook even schadowbox disabled). Heel mooi!!
Ik zie alleen het sluitkruisje nog niet. In de csss heb ik het zo staan:

body:after {
content: url(../plaatjes/lightbox/close.png) url(../plaatjes/lightbox/loading.gif) url(../plaatjes/lightbox/prev.png) url(../plaatjes/lightbox/next.png);
display: none;
}

De bestanden, o.a. close.png staan op de server, maar er gaat toch iets niet goed....

Bedankt zover voor de hulp. Het belangrijkste (tonen plaatje) is inmiddels gelukt!!

http://www.lucyonline.nl/darwin/darwin.htm
 
Antwoord

In de .css staan op meerdere plekken de plaatjes. Die moet je ook even aanpassen. Bijvoorbeeld:

Code: 
.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
 
geweldig!!! Het werkt.

http://www.lucyonline.nl/darwin/darwin.htm

Het was wel zo dat ik: url(../plaatjes/lightbox/close.png heb moeten vervangen door de volledige url: url(http://www.lucyonline.nl/plaatjes/lightbox/close.png. Toch nog iets zelf bedacht :d

Zonder jouw hulp was het nooit gelukt. Ik had nooit zelf kunnen bedenken om de *.js te vervangen...

Nogmaals zeer bedankt voor de moeite!!

Als het mag heb ik nog een laatste vraag:

Ik beheer ook een site van mijn schoonzoon www.excluservice.nl. Ook hier (op hoofdpagina) staat een afbeelding die je met schadowbox kunt tonen, verschil is dat het meerdere plaatjes zijn. Als ik (naast de bekende aanpassingen) in onderstaande code shadowbox vervang door lightbox, zou het dan moeten werken?

<a href="afbeeldingen/foto-impressie_van_bedrijf/bedrijfsauto's.jpg" rel="shadowbox[test]" title="pand Excluservice ">
<img src="afbeeldingen/foto-impressie_van_bedrijf/bedrijfsauto's_klein.jpg" width="650" height="350" class="rand"/></a>
<a href="afbeeldingen/foto-impressie_van_bedrijf/spandoek.jpg" rel="shadowbox[test]" title="Spandoek"></a>
<a href="afbeeldingen/foto-impressie_van_bedrijf/overzicht_binnen.jpg" rel="shadowbox[test]" title="Ontvangsthal"></a>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan