How to fully merge Lightview on WordPress

After having written several posts with more or less some pictures inside, I noticed that WordPress has a very awful way to show such pics in his so called gallery..
After 5 minutes on Google, looking for some plugins to improve the gallery, I found Lightview

I liked from the first sight, I downloaded it, followed the instruction on how to install it and it worked straightway.

So, if it’s so easy to install and it works so well, why should I write a post ?
Because the problem I had was about the gallery.
Wordpress doesn’t allow to do many modification to the gallery, since its tag is [gallery], I had to play around with Firebug to read how the HTML gallery code is written.
I created a CSS file with the same structure of the gallery-thumbnail in order to modify the link with whom each pic of the gallery is opened, keeping the same WordPress structure but linked to the Lightview class.

Lets start from this image:
<a href="http://www.juricalleri.net/wp-content/uploads/2012/07/great-nature-pictures-20.jpg">
<img src="http://www.juricalleri.net/wp-content/uploads/2012/07/great-nature-pictures-20-150x150.jpg" alt="" title="great-nature-pictures-20" width="150" height="150" class="alignleft size-thumbnail wp-image-217" /></a>
It is a common pic added using WordPress tool, who use an auto generated HTML code.
If you click on the pic it will open in a new tab, which is not the best way for a tool to be, but I like the style of its borders.

This one instead uses Lightview instructions:
<a href="http://www.juricalleri.net/wp-content/uploads/2012/07/great-nature-pictures-20.jpg" class="lightview">Show image</a>
Show imageClicking on "Show Image" we can see a preview of how Lightview works.
It is possible to replace the "Show Image" link with something we want, for example we can use the same thumbnail WordPress used before.
<a href="http://www.juricalleri.net/wp-content/uploads/2012/07/great-nature-pictures-20.jpg" class="lightview">
<img src="http://www.juricalleri.net/wp-content/uploads/2012/07/great-nature-pictures-20-150x150.jpg" alt="" title="great-nature-pictures-20" width="150" height="150" class="alignleft size-thumbnail wp-image-217" /></a>

This one is using both WordPress style and Lightview, the result is great to see!
I added the class "lightview" in the <a> tag, as Lightview instructions.

So far everything is clear, now let’s move to the gallery!

When some pictures are selected to be shown in the gallery, WordPress use the tag [gallery] and it shows in the post the pics related to the gallery with a structure of columns and transparent borders, tipical of WordPress and the twenty eleven theme.

With the use of firebug I found this structure which I subsequently modified to make it compatible with all the galleries:

.CSS code

#gallery-1 {margin: auto; }
#gallery-1 .gallery-item {
    float: left;
    margin-top: 10px;
    text-align: center;
    width: 33%;
}
#gallery-1 img {border: 2px solid #cfcfcf; }
#gallery-1 .gallery-caption {margin-left: 0; }

.HTML code

<div id="gallery-1" class="gallery gallery-columns-2 gallery-size-thumbnail" >

<dl class="gallery-item">
<dt class="gallery-icon">
<a href="PATH OF IMAGE" class="lightview" data-lightview-title="TITLE OF IMAGE" data-lightview-group="mixed">
<img src="PATH OF THUMBNAIL IMAGE-150x150.jpg"></a></dt>
<dd class="wp-caption-text gallery-caption"> TEXT YOU WILL SEE UNDER THE IMAGE </dd></dl>

<dl class="gallery-item">
<dt class="gallery-icon">
<a href="PATH OF IMAGE 2" class="lightview" data-lightview-title="TITLE OF IMAGE 2" data-lightview-group="mixed">
<img src="PATH OF THUMBNAIL IMAGE2-150x150.jpg"></a></dt>
<dd class="wp-caption-text gallery-caption"> TEXT FOR THE 2ND IMAGE </dd></dl>
</div>

I uploaded the gallery.css along with all other CSS and I linked to the site by editing the header.php like this:

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/gallery.css"/> 

This is the result: