Geforceerd een rel toevoegen

**Robin Steffers** · 09-06-2013, 15:42

Beste leden,

Ik zit al een tijdje met het volgende probleem:
Op een website heb ik een afbeelding staan welke ik graag in Lightbox wil kunnen openen. Echter kan ik de code waar deze afbeelding word geladen niet aanpassen. Ik ben dus beperkt in mogelijkheden en moet de afbeelding dus "geforceerd" wijzigen door een stukje Javascript/jQuery.

Dit is de HTML code:

Code:

<div class="gv_panel" style="width: 240px; height: 290px;">
<img style="visibility: visible; " src="t-shirt.jpg">
</div>

Is er een manier om hieraan rel="lightbox" toe te voegen zonder deze html code aan te passen? Dus bijvoorbeeld via een stukje Javascript/jQuery bovenaan de pagina.
Ik hoor het graag als iemand mij een stukje op weg kan helpen!

**Tjerk de Heer** · 09-06-2013, 18:12

Er heeft iemand toevallig net een goed antwoord op StackOVerflow gezet zie ik ;)

**Robin Steffers** · 09-06-2013, 19:05

Dan heb je niet echt goed gekeken, want het werkt namelijk nog steeds niet.

Ik probeer het volgende stuk code uit te voeren:

Code:

<script type="text/javascript">jQuery(document).ready(function($) {
  $('.gv_panel img').colorbox({rel:'gal'});
});
</script>

Echter krijg ik steeds dezelfde error: Uncaught ReferenceError: jQuery is not defined

**R. Bommel** · 09-06-2013, 19:18

Zo te zien betreft het een jQuery initialisatie fout.

Ga dus na of bovenin de code wel de juiste Javascript jQuery Libraries worden ingeladen.

**Robin Steffers** · 09-06-2013, 19:29

Ja deze worden ingeladen, want alle andere jQuery codes werken wel.

**rogier fischer** · 09-06-2013, 20:09

Staat de include van jQuery boven dit stukje code?

**Tjerk de Heer** · 09-06-2013, 20:15

Ik had het net met Firebug werkend door het stukje code wat je hierboven geplaatst hebt van de <head> naar de <body> (net boven de <div id=colorbox">) te zetten maar een herhaling van zetten leverde weer niets op. Misschien omdat je zelf ook nog aan het puzzelen bent?

**Robin Steffers** · 09-06-2013, 21:30

@Rogier Fischer:
Aangepast, het stukje code word nu pas geladen na jQuery. De error is nu ook weg.

@Tjerk de Heer:
Ik heb hetzelfde geprobeerd met Firebug, maar helaas werkt het hier niet...

Als iemand me nog kan helpen hoor ik het graag, eventueel tegen betaling.

**Cas van Dongen** · 11-06-2013, 12:17

De oplossing:

Code:

<script>
    $(document).ready(function() {
        $( '.gv_panel img' ).attr( 'rel', 'lightbox' );
    });
</script>

Ik heb hem even in een JSFiddle gezet voor je: http://jsfiddle.net/GAgsP/

**Robin Steffers** · 11-06-2013, 21:37

@Cas van Dongen:
Bedankt voor het helpen, maar deze oplossing werkt helaas niet.
Exact dezelfde code staat trouwens ook in de link die Tjerk hierboven heeft geplaatst.

**Sylvia Trommer** · 12-06-2013, 11:29

een lightbox moet toch aan een link gekoppeld worden en niet aan een plaatje. Dus de code gaat sowieso niet werken. Of zie ik iets over het hoofd?

**Robin Steffers** · 12-06-2013, 13:03

@Sylvia Trommer:
Dat klopt, maar de code om een attribuut aan een element toe te voegen werkt op dit moment ook niet. Dus of het nu om een afbeelding of een link gaat doet er op het moment even niet toe.

**Sylvia Trommer** · 12-06-2013, 13:16

de bovenstaande code wert volgens mij wel. Als ik namelijk van de geplaatste jsfiddle de eigenschappen van het plaatje in Firebug of de web developer tools bekijk, zie ik netjes rel="lightbox" als attribuut.

Geforceerd een rel toevoegen