Welcome to the jKit community. This is the place to discuss everything on and around jKit. Be friendly and I’m sure other members will be friendly with you, too.
Change the previous , next ,close buttons with custom images.
  • I find the jKit very interesting and was trying to play around a little. Through the data-jKit attribute, i was able to change the <, > ,X with whatever text i want Like this: data-jkit=”[lightbox:group=images;prev=A;next=K]”

    Through jQuery, i was able to change the close button to a custom close icon like this: $(‘.demo a’).jKit(‘lightbox’, {‘closer’: ”);

    What i was trying to get is custom icons for all the 3 together. The documentation says, ‘prev’ and ‘next’ supports HTML, so i tried with this:

    $(‘.demo a’).jKit(‘lightbox’, { ‘closer’: ”, ‘prev’: ”, ‘next’: ”, ‘group’: ‘images’ });

    But this was not working . Tried messing around with data-jkit attribute in html too, but was in vein. Any pointer will be of great help. Thanks in Advance.

  • Hi, I just tried this out and it works for me. Can you post a link to an sample page where you get this problem?

    Creator of jKit – www.fredibach.ch
  • Thanks a lot for the response! Here is the complete html markup:

    ( html only ) : http://jsfiddle.net/harikrishkk/wpx8H/

    The css is exactly the same as that contained in the download zip. No js added anywhere as well. The only addition is the close.png which is a simple png image. Other than that, the code is same as that given in the Lightbox example. Is there any examples that has a custom images added for Close, Prev, and Left buttons? I am quite sorry that i couldnt host the example anywhere so that you could have checked it straight away. Or is there any mail list to which i can send the full zip code /upload ?

  • The problem is that you are not in the same context. This is no problem for most commands, but a lightbox with a group needs to know of all the other lightbox calls with the same group key. You can solve that like this:

    $('body').jKit();
    $('.demo a').each( function(){
        $('body').data('jKit').executeCommand(this, 'lightbox', { 
            'closer': '<img src="images/add.png">', 
            'prev': '<img src="images/add.png">', 
            'next': '<img src="images/add.png">', 
            'group': 'images' 
        });
    });
    

    it’s a little bit more code, but this way you stay in the same context.

    Creator of jKit – www.fredibach.ch
    Thanked by 1harikrish
  • Cool..! It did the trick….Many thanks for the quick response!!…. Thank you!…..

  • Just for your consideration, I haven’t tried lightbox command as yet, but for carousel I did this with prevhtml=;nexthtml=; and CSS

            a.jkit-carousel-prev {
            width: 51px;
            height: 63px;
            background: url(https://jquery-jkit.com/files/community/discussion/images/arrow_cream.png);
            cursor: pointer;
            cursor: hand;
            margin-top: -230px;
            text-align: center;
            user-select: none;
            }
            a.jkit-carousel-next {
            width: 51px;
            height: 63px;
            background: url(https://jquery-jkit.com/files/community/discussion/images/arrow_cream.png);
            -webkit-transform: rotate(-180deg);
            -moz-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            cursor: pointer;
            cursor: hand;
            margin-top: -230px;
            text-align: center;
            user-select: none;
            }
            a.jkit-carousel-prev:hover, a.jkit-carousel-next:hover {
            background: url(https://jquery-jkit.com/files/community/discussion/images/arrow_red.png);
            }
    
    Thanked by 1harikrish
  • When I change the next / prev / close – the jkit-lightbox-nav does not change, and therefore throws out the balance… the bottons move to the right of the view. Is this a bug, or am I doing something wrong?

  • Sorry – my mistake…