Ramon Bovenlander

Een vervolg, update of fix voor mijn vorige post. Na een update van werk aan de muur zijn ze naar SSL/HTTPS over gestapt. Dit is natuurlijk altijd beter dan een niet beveiligde verbinding. Maar de mooie “hack” dit ik had gemaakt werkte niet meer. Elke keer als je een artwork wilde bekijken werd deze niet meer in de colorbox lightbox getoond. Erg jammer natuurlijk. Het idee dat je iets van de werken wilt zien maar daarvoor buiten je de website moet treden vind ik maar niks. Dus ben ik weer op zoek gegaan naar een oplossing.

De bedoeling is om het Iframe waar het wadm artwork in getoond moet worden het herladen script van wadm website overschrijft. Na wat zoeken en testen heb ik de oplossing gevonden. Bij het iframe moeten we het attribuut sandbox toevoegen met een waarde “allow-scripts”.

maak een backup van jquery.colorbox.js naar bijv. jquery.colorbox-backup.js

Hernoem de volgende bestanden:

• jquery.colorbox-min.js -> jquery.colorbox-min-org.js
• jquery.colorbox.js -> jquery.colorbox-min.js

Definition and Usage

The sandbox attribute enables an extra set of restrictions for the content in the iframe.

When the sandbox attribute is present, and it will:

• treat the content as being from a unique origin
• block form submission
• block script execution
• disable APIs
• prevent links from targeting other browsing contexts
• prevent content from using plugins (through <embed>, <object>, <applet>, or other)
• prevent the content to navigate its top-level browsing context
• block automatically triggered features (such as automatically playing a video or automatically focusing a form control)

Toevoegen van onderstaande regel op regel 119.

iframe.setAttribute(“sandbox”, “allow-scripts”);

Update fix voor het https probleem is te vinden in mijn volgende post: UPDATE/FIX: WADM wordpress plugin lightbox overlay

Als je op mijn pagina foto gallerij kijkt zie je daar mijn foto’s staan. Al deze foto’s zijn door mij gemaakt en te koop via Werk aan de muur (WADM). Om de foto’s op je wordpress site aan te bieden heeft WADM een plugin gemaakt genaamd “Werk aan de Muur“. Nu heb ik de WADM plugin geïnstalleerd op mijn wordpress website. Na het volgen van de handleiding werkte deze perfect!

Ik vond het alleen vervelend dat mijn bezoekers mijn website moesten verlaten om een vergrote versie van de foto te kunnen bekijken. Zelf vind ik het mooi dat de foto naar voren komen in een zogenoemd lightbox overlay. Dus ik ben op zoek gegaan om dit op mijn website met de WADM plugin te installeren.

Dit heb ik op de volgende manier opgelost. Ik neem aan dat je de Werk aan de Muur plugin al hebt geïnstalleerd en geconfigureerd.

1. Installeer de wordpress plugin “WordPress Colorbox Lightbox” op je eigen wordpress website.
2. Nu moeten we ervoor zorgen dat de foto’s welke door de werk aan de muur plugin worden gemaakt de juiste css class erbij krijgt. Dit kunnen we doen met een jquey scriptje. Dit scriptje zoekt naar de links door middel van de class die de links al hebben en voegt daar de classes bij toe welke nodig zijn voor het lightbox effect. Plaats dit scriptje ergens in je thema waar je javascript in kwijt kan. Meestal ergens in de header tussen de <script></script> tags

(function($) {
$('.wadm-artwork-art').find('.wadm-artwork-link').addClass('wp-colorbox-iframe cboxElement');
})(jQuery);