Thursday, 27 January 2011

Jquery Lightbox - another Solution for Lightbox effect in Blogger

In previous post on Lightbox effect (Lightbox really working script) , I wrote about a script for Lightbox effect based on Scriptaculous (a Javascript framework) that work well in Blogger .
But if your blog is using Jquery framework ,this Lightbox effect can't work because there's a conflict between Jquery and Scriptaculous .
So here we have another solution that can be used in Blogger ,and of course ,it can be applied for all Simplex templates (included Simplex Celebrity ,Simplex Enews ...etc) .It's Jquery Lightbox

lightbox effect in Simplex Celebrity template


Demo in Simplex Celebrity template

How to install this script ?


1,Go to Blogger Dashboard ,Continue to Design tab ,then Edit HTML tab .

2,Add this code right before <body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>


<script src="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js" type="text/javascript"/>
<link href="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/>

<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>

Save changes . You are done .

How to use ?

To use Lightbox effect in your post ,when editing post ,click on Edit HTML .

To add lightbox effect for one image , use rel="lightbox" title="Your image Caption" as picture above
To add lightbox effect for multiple images , use rel="lightbox[albumname]" title="Your Image Caption"
if you want to add another image to this album,upload the second image and use rel="lightbox[albumname]" title="Caption for Second image of albumname" 
in this case , lightbox will work like a gallery with next and previous links  and you can use keyboard to navigate through the album

That's all for Jquery Lightbox effect .
This post is for all of you ,who want to use Lightbox effect in Blogger , and specially for naxoz-report and DJ Remix Town ,who commented in my blog asked for Lightbox effect in Simplex Celebrity template .
Posted by at
Labels:

22 comments:

  1. Dj Remix Town27 January 2011 at 06:55

    thnx its working but its hard because everytime we have to go to edit and edit it i have an example here its working on blogger default template but its not working on simplex template pls visit here.
    http://blog.fyglab.com/2010/07/how-to-add-lightbox-effect-image-view.html
    we don`t need to go to edit n ol..pls make something like this.

    ReplyDelete
  2. Dj Remix Town27 January 2011 at 08:36

    okay let me check..

    ReplyDelete
  3. Dj Remix Town27 January 2011 at 08:52

    bro we got one problem in this ..
    if i remove this [rel*=lightbox]
    the other hyperlinks to the website are also opening in lightbox.

    ReplyDelete
  4. naxos-report27 January 2011 at 11:16

    thanx for the fast answer , i try it and the lightbox working good, but this time i see, not working the slider on front page...:(

    My blog is 31days4u.blogspot.com

    ReplyDelete
  5. naxos-report27 January 2011 at 23:09

    :))))))

    THANXXX AGAIN!!
    I make this change and all working perfect!!!!

    Thanx my friend for support... ;)

    ReplyDelete
  6. Dj Remix Town28 January 2011 at 04:09

    still i m having same problem the hyperlinks are opening in lightbox.. pls help

    ReplyDelete
  7. PRAVASI28 January 2011 at 23:59

    I TRY IT BUT HOW CAN ADD THIS VIDEO POST .....ANY IDEA PLS HELP NE

    ReplyDelete
  8. Jacon5 February 2011 at 19:17

    My problem is that it takes every image and puts them in one lightbox gallery - even though I've used different gallery names. So when it should just open the one or two images in that post, it opens every single image on the blog (that I've added the lightbox code to). Very annoying and confusing for readers. Thoughts?

    ReplyDelete
  9. Periergos27 March 2011 at 14:39

    Lightbox is working, but on simplextranscript I use, it deactivates the mediabar!!! Any suggestions?

    pao1908-history.blogspot.com

    ReplyDelete
  10. hommam arbi23 May 2011 at 11:59

    Hello

    I looked for < body > tag in my template but i cant find it is there other tag i can replace it with
    this is my blog : http://fforfashion11.blogspot.com/

    thanks .....

    ReplyDelete
  11. Mira Gospel31 May 2011 at 06:34

    Não consegui instalar esse perfeito estilo no meu blogger, e ainda desejo saber se é possivel criar uma galeria com varios albúns no blog, pode ser em página ou em post? Me ajude pf

    ReplyDelete
  12. Open door to everyone...24 June 2011 at 21:16

    Dude strange!!! I used with SimplexBuzz and the lightbox layer is under the posts! How can I put it on top most layer?

    I am using here: adultloo.info

    ReplyDelete
  13. nhamngahanh6 July 2011 at 18:47

    @Open door to everyone... : you can add an attribute z-index to the element you want it float over :D
    For example with the lightbox ,here is the CSS for this

    #jquery-lightbox {
    left: 0;
    line-height: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 100;
    }

    you can change z-index:100 to a greater value such as 999 ,it will ensure the lightbox box always float on top

    ReplyDelete
  14. Open door to everyone...7 July 2011 at 08:49

    I tried as following: http://pastebin.com/t5BRzQQM

    But it is still under the post. M I missing anything?

    ReplyDelete
  15. J-Sagio19 August 2011 at 04:18

    Thank you so much!!! It works! :)

    ReplyDelete
  16. Muhammad Taqi21 August 2011 at 05:45

    not work :(

    ReplyDelete
  17. Ami26 August 2011 at 03:13

    100% working tutorial...
    http://bloggerfreelayouts.blogspot.com/2011/08/jquery-blogger-image-gallery-blogspot.html

    ReplyDelete
  18. Ami26 August 2011 at 03:17

    nice work i also wrote some tutorials about blogger and jquery you will enjoy...
    www.bloggerfreelayouts.blogspot.com

    ReplyDelete
  19. Cardinal Scene4 September 2011 at 06:33

    How can i set maximum size for large images to fit on screen? thanks.
    -cardinalscene.blogspot.com

    ReplyDelete
  20. MY RAMANTHALI13 October 2011 at 10:19

    I tried the light box and its working, but its shown under navigation bar, any one help me pls................
    here is my blog
    http://my-ramanthali.blogspot.com/2011/08/17_25.html

    ReplyDelete
  21. Badiuddin27 October 2011 at 11:12

    This comment has been removed by the author.

    ReplyDelete
  22. MY RAMANTHALI8 November 2011 at 10:31

    I tried the light box and its working, but its shown behind navigation bar, any one help me pls...plsssssssss...............
    here is my blog
    http://my-ramanthali.blogspot.com/2011/08/17_25.html

    Thnx in advnce

    ReplyDelete

Subscribe to: Post Comments (Atom)