LightBox toevoegen op www.Blogspot.com

Are you not Dutch? But English is no problem? Click here to go to the English version.

Mijn eerste bijdrage op Blogspot.com. Omdat Jenny (collega) hier een blog heeft en ik me ergerde aan het feit dat als je op een foto klikt, je die foto in je browser opent (niet eens in een nieuw scherm), heb ik dit account aangemaakt om te kijken of ik wat met een LightBox kan gaan doen. En het is gelukt.

Omdat het hier om 'plaatjes' gaat, heb ik eerst maar een foto van Marijke, die ook een 'plaatje' is om te zien (oei, foute woordgrap!) hier als voorbeeld gebruikt. En dan voegen we ook meteen even de uitleg toe hoe je dit werkend kunt krijgen.

Als je dit bericht via LinkedIn leest werkt dit niet bij het plaatje, je zult dan toch even naar durkio.blogspot.com moeten surfen.


Als je een plaatje toevoegt in je BLOG moet je in de link HTML-tag deze eigenschap toevoegen: class="lightbox", dus: <a href='groot plaatje' class="lightbox">

Op die manier weten we dat als je op dit plaatje klikt, deze in een LightBox wilt openen.
Voor de rest van instellen, doen we even net alsof we nog in moeten loggen op blogger.com.

- We loggen in.
- Je komt op je Dashboard.
- Je hebt dan rechtsboven een deel met Nieuw Bericht, Berichten bewerken, Instellingen.
- Klik daar op Indeling.

Je ziet dan de template van jouw blog. Klik daar op de link HTML bewerken.
Download daar eerst je volledige sjabloon, heb je nog een backup.

We gaan nu de Lightbox-code toevoegen.

STAP 1
Bovenin het sjabloon staat iets van de volgende tekst:
<b:skin><![CDATA[/*
Daaronder staan allemaal style-dingen (body{color:......
Voeg hier de volgende zaken toe:

html {
height: 100%;
}
body{
....
height: 100%;
..
}
#main-wrapper {
....
height: 100%;
}

.overlay {
color: #FFF;
position:absolute;
top:0;
left:0;
height:100%;
height: 10000px;
overflow: hidden;
width:100%;
background:#000;
opacity:0;
filter:alpha(opacity=0);
z-index:50;
}
.container {
position:absolute;
opacity:0;
filter:alpha(opacity=0);
z-index:51;
}

STAP 2
Vervolgens staat na dit stuk de volgende HTML code: </head>
Voeg daar het volgende toe, zodat het er zo uitziet:

<script src='http://www.google.com/jsapi'/>
<script>
  // Load jQuery
  google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);

  // on page load complete set the LightBox
  google.setOnLoadCallback(function() {
    $(&quot;.lightbox&quot;).click(function() {
 overlayLink = $(this).attr(&quot;href&quot;);
 window.startOverlay(overlayLink,$(this).offset().top);
        return false;
      });

   $(&quot;.overlay&quot;).css({&quot;display&quot;:&quot;none&quot;})

   $(&quot;.overlay&quot;).click(function(){
        $(&quot;.container&quot;).css({&quot;display&quot;:&quot;none&quot;})
        $(&quot;.overlay&quot;).css({&quot;display&quot;:&quot;none&quot;})
     })

  });

var tryCount = 0;

function startOverlay(overlayLink,topOffset) {
   var copy_overlayLink = overlayLink;
     overlayLink=overlayLink.replace(&#39;s1600-h&#39;,&#39;s1600&#39;);
     $(&quot;.overlay&quot;).animate({&quot;opacity&quot;:&quot;0.6&quot;}, 200, &quot;linear&quot;);
    $(&quot;.container&quot;).html(&quot;<img alt='' src='&quot;+overlayLink+&quot;'/>&quot;);

        $(&quot;.container&quot;).css({&quot;display&quot;:&quot;block&quot;})
        $(&quot;.overlay&quot;).css({&quot;display&quot;:&quot;block&quot;})

  var imgWidth = $(&quot;.container img&quot;).width();

if ((tryCount &lt; 10) &amp;&amp; (imgWidth &lt; 10)){
    tryCount++;
    startOverlay(copy_overlayLink,topOffset);
    return;
}
  var imgHeight = $(&quot;.container img&quot;).height();

$(&quot;.container img&quot;).click(function(){
        $(&quot;.container&quot;).css({&quot;display&quot;:&quot;none&quot;})
        $(&quot;.overlay&quot;).css({&quot;display&quot;:&quot;none&quot;})
});

   $(&quot;.container&quot;)
 .css({
  &quot;display&quot;:        &quot;block&quot;,
  &quot;position:&quot;:       &quot;absolute&quot;,
  &quot;left:&quot;:       &quot;50%&quot;,
  &quot;width&quot;:      imgWidth,
  &quot;height&quot;:     imgHeight,
  &quot;margin-top&quot;: topOffset-150,
  &quot;margin-left&quot;:-(imgWidth/2),
  &quot;margin-left&quot;:-&quot;0&quot; //to pos it in the middle
 })
 .animate({&quot;opacity&quot;:&quot;1&quot;}, 200, &quot;linear&quot;);
}

</script>
</head>

STAP 3
Hierna komt het body-deel (<body .... >).
Weer verder naar beneden kom je bij de <div id='main-wrapper'>

Zorg dat dit er zo uitziet:

<div id='main-wrapper'>
<div class='overlay' style='overflow-y:hidden;display:block;'/>
<div class='container' id='container' style='overflow-y:hidden;display:none;'><img id='bigpicture' src='about:blank'/></div>

Sla het sjabloon op deze manier op, hiermee zou het moeten werken (werkt hier zo op dit blog).

SAMENVATTING
Ik heb dit niet allemaal zelf bedacht. Ik wilde de standaard Google API's voor JQuery ed. gebruiken, zodat een 'normale' gebruiker van blogger.com/blogspot.com niet zelf nog javascripts moet gaan uploaden. Het is een framework waarmee je de boel werkend krijgt.
De URL waar ik info vandaan gehaald heb is:
http://kilianvalkhof.com/2008/javascript/building-your-own-lightbox-part-1/

Het komt soms voor dat de eerste keer het plaatje niet getoond wordt. Maar dat is dan ook eenmalig, hierna nog een keer aanklikken, en het werkt wel. In heb in de code een loopje toegevoegd om het 10x te proberen.

Het werkt nu bij plaatjes die je upload bij blogspot.com. Hier zit een adder onder het gras, de normale link wijst naar:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYi7fCYm4FD7AIxFbJVMEcjA1PTSn0iZUu1lEmxKwOsyhKZp9Ohxm2VbbnYaf9kwzwo6CDa7nMjq6HIZdQaFAPsybOt5juQl9qpPbE9SB4QDotbdzdFHDCx1JXunnjpfLeb5_4xoU0NcN/s1600-h/298886790_6_JAm4.jpeg

Alleen is dat niet een plaatje maar een HTML pagina waarin het plaatje getoond wordt.
Het echte plaatje staat in ..../s1600/ (dus zonder de -h). Ik vervang dit in het Javascript (hierboven genoemd).


Hier staat mijn sjabloon, mocht je aan bovenstaande niet genoeg hebben en de complete code willen zien. Je moet even de code van de pagina die opent bekijken en daaruit de <PRE> en </PRE> verwijderen.




ENGLISH VERSION

This is my fist blog on Blogspot.com. Because Jenny (collegue) has a blog on blogspot.com I got very irritated by the fact that when you click on a picture, the 'big' picture opens in the same window. Not even a new one! So I registered myself for this account to see if I can make it work with a LightBox. And I succeeded!

Because we are talking about pictures (mostly photographs), I start here with a photo of Marijke, I only want beautifull things on my blog, and god... is she beautifull! Below this part I describe how you can make it work on your own Blogspot space.


When you add a picture in your blog, you have to add in the HREF tag the attribute class="lightbox", like this: <a href='groot plaatje' class="lightbox">

Because we are going to edit the main template, the javascript code knows that this link has to open in a LightBox. If you do not add it, the link will open like it always opens (in the same window).
The 'howto', we presume we have to login on blogger.com

If you read this message not on Blogspot but e.g. on LinkedIn the code doesn't work. You will have to go to durkio.blogspot.com to test it.


- We log in.
- You see your Dashboard.
- Right on top you have a part with 'Post, edit post, settings' (my settings of blogger.com are Dutch, so the names might be a little different, but you see what I mean)
- Click on settings.

You see the template of your blog. Click on edit HTML.
First download the complete template to your pc, then you always have a backup.

Now we are going to add the Lightbox Code.

STEP 1
On top of the template you see something like this:
<b:skin><![CDATA[/*
Below that you see all style-tags(body{color:......
Add the following code (from .overlay):

html {
height: 100%;
}
body{
....
height: 100%;
..
}
#main-wrapper {
....
height: 100%;
}

.overlay {
color: #FFF;
position:absolute;
top:0;
left:0;
height:100%;
height: 10000px;
overflow: hidden;
width:100%;
background:#000;
opacity:0;
filter:alpha(opacity=0);
z-index:50;
}
.container {
position:absolute;
opacity:0;
filter:alpha(opacity=0);
z-index:51;
}

STEP 2
After that you see this HTML code: </head>
Add the code so it looks like this:

<script src='http://www.google.com/jsapi'/>
<script>
  // Load jQuery
  google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);

  // on page load complete set the LightBox
  google.setOnLoadCallback(function() {
    $(&quot;.lightbox&quot;).click(function() {
 overlayLink = $(this).attr(&quot;href&quot;);
 window.startOverlay(overlayLink,$(this).offset().top);
        return false;
      });

   $(&quot;.overlay&quot;).css({&quot;display&quot;:&quot;none&quot;})

   $(&quot;.overlay&quot;).click(function(){
        $(&quot;.container&quot;).css({&quot;display&quot;:&quot;none&quot;})
        $(&quot;.overlay&quot;).css({&quot;display&quot;:&quot;none&quot;})
     })

  });

var tryCount = 0;

function startOverlay(overlayLink,topOffset) {
   var copy_overlayLink = overlayLink;
     overlayLink=overlayLink.replace(&#39;s1600-h&#39;,&#39;s1600&#39;);
     $(&quot;.overlay&quot;).animate({&quot;opacity&quot;:&quot;0.6&quot;}, 200, &quot;linear&quot;);
    $(&quot;.container&quot;).html(&quot;<img alt='' src='&quot;+overlayLink+&quot;'/>&quot;);

        $(&quot;.container&quot;).css({&quot;display&quot;:&quot;block&quot;})
        $(&quot;.overlay&quot;).css({&quot;display&quot;:&quot;block&quot;})

  var imgWidth = $(&quot;.container img&quot;).width();

if ((tryCount &lt; 10) &amp;&amp; (imgWidth &lt; 10)){
    tryCount++;
    startOverlay(copy_overlayLink,topOffset);
    return;
}
  var imgHeight = $(&quot;.container img&quot;).height();

$(&quot;.container img&quot;).click(function(){
        $(&quot;.container&quot;).css({&quot;display&quot;:&quot;none&quot;})
        $(&quot;.overlay&quot;).css({&quot;display&quot;:&quot;none&quot;})
});

   $(&quot;.container&quot;)
 .css({
  &quot;display&quot;:        &quot;block&quot;,
  &quot;position:&quot;:       &quot;absolute&quot;,
  &quot;left:&quot;:       &quot;50%&quot;,
  &quot;width&quot;:      imgWidth,
  &quot;height&quot;:     imgHeight,
  &quot;margin-top&quot;: topOffset-150,
  &quot;margin-left&quot;:-(imgWidth/2),
  &quot;margin-left&quot;:-&quot;0&quot; //to pos it in the middle
 })
 .animate({&quot;opacity&quot;:&quot;1&quot;}, 200, &quot;linear&quot;);
}

</script>
</head>

STEP 3
After this you get the body-part (<body .... >).
When you scroll down you get the main-wrapper part (<div id='main-wrapper'>)

Edit it so it looks like this:

<div id='main-wrapper'>
<div class='overlay' style='overflow-y:hidden;display:block;'/>
<div class='container' id='container' style='overflow-y:hidden;display:none;'><img id='bigpicture' src='about:blank'/></div>

Save the template after executing these steps, when you have done that it should work (that's the way it works on this blog).

SUMMARY
Not all of this code is from me. I uses some parts I found on the Internet and edited for use here, the way a 'common' user of blogger.com/blogspot.com can make it work by using the Google API's and not have to upload all javascripts by him/herself.

The page which gave me the basis:
http://kilianvalkhof.com/2008/javascript/building-your-own-lightbox-part-1/

Some changes in this code are the fact that sometimes at the first click it did not work, it doesn't show the picture. When you click for the second or third time there is no problemn. So I added a loop to try it 10 times. Also the blogspot link links to the HTML page which contains the image, not to the large image itself. Therefore the replace in the code.
The normal link (to the page) references:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYi7fCYm4FD7AIxFbJVMEcjA1PTSn0iZUu1lEmxKwOsyhKZp9Ohxm2VbbnYaf9kwzwo6CDa7nMjq6HIZdQaFAPsybOt5juQl9qpPbE9SB4QDotbdzdFHDCx1JXunnjpfLeb5_4xoU0NcN/s1600-h/298886790_6_JAm4.jpeg

The real picture is in .../s1600/ (without the -h), that is what I replace.


Here is the template, if you cannot get it working and want to see the complete code. You have to view the code of the page which opens and then remove the <PRE> en </PRE>.