It looks like you’re new here. If you want to get involved, click one of these buttons!
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?
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.
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/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/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/images/arrow_red.png);
}