Bronvermelding met jquery

Binnen mijn blogs en nieuwsberichten maak ik zo nu en dan gebruik van een foto die niet door mij gemaakt is. De maker (fotograaf) van deze foto's heeft via een Creative Commons Licentie bepaald dat je zijn werk mag delen mits je aan bronvermelding doet en de gebruikte foto onder dezelfde licentie vrijgeeft.

Op het moment dat je met je muis over een foto rolt die onder de Creative Commons licentie valt zie je een tekst met hierin een verwijzing naar de maker en de licentie waaronder de foto is vrijgegeven. Weten hoe dit werkt?

CSS en een paar regels Jquery

De techniek die ik hiervoor gebruik bestaat uit CSS en een paar regels Jquery. Als voorbeeld neem ik de CGBlog of News module uiteraard is de beschreven werkwijze ook toe te passen op andere afbeeldingen en modules. Denk aan de Gallery module :)

Stap 1 Inrichten van News of CGBlog

• Installeer de CGBlog of News module en voeg de juiste module tags toe aan je website

Stap 2 Aanmaken van custom fields

• Binnen de News of CGBlog module heb je 2 custom fields nodig. Een voor het uploaden van de afbeelding een voor het plaatsen van tekst welke over de afbeelding geplaatst dient te worden.

Inhoud -> Calguys Blog Module -> Veld Definities
of ...
Inhoud -> News -> Veld Definities

+ Veld Definitie Toevoegen

Naam: afbeelding
Type: Bestand
Maximale Lengte: 255
Publiek: [x]

Naam: bronvermelding
Type: Tekstruimte
Maximale Lengte: 255
Publiek: [x]

Stap 3 CSS code

.afbeeling {
    position: relative;
    width: 640px; 
    height: 480px;
    margin-bottom: 16px;
}

.bronvermelding {
    position: absolute;
    width: 640px;
    bottom: 0px;
    left: 0px;
    display: none;
}

.bronvermelding-txt {
    background-color: #FFFFFF;
	padding: 8px;
}

Stap 4 Jquery code

Plaats de volgende code in de head van template die geldt voor je news of cgblog bericht.

<script src="http://www.google.com/jsapi?key=API_KEY_HERE" type="text/javascript"></script>
    
<script type="text/javascript">
google.load("jquery", "1.4.2");
</script> 

<script type="text/javascript">    
    $(document).ready(function() {

    $('div.bronvermelding').each(function() {
        $(this).css('opacity', 0);
        $(this).css('width', $(this).siblings('img').width());
        $(this).parent().css('width', $(this).siblings('img').width());
        $(this).css('display', 'block');
    });
	
    $('div.afbeelding').hover(function() {
        $(this).children('.bronvermelding').stop().fadeTo(500, 0.9);
    },function() {
        $(this).children('.bronvermelding').stop().fadeTo(500, 0);
    });   

    });
</script>

Stap 5 Aanpassen van detail template

In de detail template wordt de afbeelding en bronvermelding opgenomen als:

Inhoud -> Calguys Blog Module -> Detail sjabloon
of ...
Inhoud -> News -> Veld Definities -> Detail sjabloon

{if $entry->afbeelding}
<div class='afbeelding' style="background-image: url('{$entry->file_location}/{$entry->upload}'); ">
    <div class='bronvermelding'>
        <div class='bronvermelding-txt'>{$entry->bronvermelding}</div>
    </div>
</div>
{/if}

Stap 6 Voorbereiden van foto en aanmaken nieuwsbericht

Open je favoriete fotobewerkings-programma schaal de foto die je wilt uploaden op het gewenste formaat (640px x 480px in css hierboven) en schrijf met je favoriete tekstverwerker een hartverwarmend nieuwsbericht of blog.

Links

• Uitleg Creative Commons Licentie