Lightbox automatically applied to image links

[Dylan]

A common way of interacting with other lightbox libraries is to have a snippet of jquery that applies 
the lightbox to all image links on a page. This makes for nice unobtrusive javascript. 

Is there a nice clean equivalent of this example using the jquery fancybox library?

<script type="text/javascript">
$(document).ready(function() {
$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]').attr('rel', 'gallery').fancybox();
});
</script>

[Kostadin]

Hello Dylan,

Since jquery fancybox is not directly related with RadControls I am afraid that it falls out of scope of our support services. I would recommend you to looks for an answer over the internet or directly contact the support on their official website. Additionally if you have any questions related with RadLightBox control we will be glad to help you further.

Regards,
Kostadin
Telerik

[Dylan]

I'm not asking for support regarding the fancybox library. I was just referencing it as an example of how other lightwindow/modal jquery plugins use nice clean unobtrusive javascript to convert image links in a page to open in a lightbox rather than in a new tab. 

I don't see any jquery method that would do the same with Telerik.Lightbox.  You have to do all kinds of ugly stuff on server side to set specific anchor tags to use lightbox.  

We managed to work out a system to do this on the server side where we print out the required javascript for each of these links, but if you want lightbox to compete against libraries such as lightwindow2, fancybox, colorbox etc you might consider this for a future release. 

Basically, being able to do $('any element reference').telerikLightBox()  in javascript to convert any of those elements to use lightbox for their target url.

[Kostadin]

Hi Dylan,

Note that the RadLightBox is not a client widget as fancybox, but is a server control with a client side functionality. I hope in future our developers will invent an implementation of such scenarios.

Regards,
Kostadin
Telerik

[Hugo Augusto]

Actually, this question makes a lot of sense. Is it possible to attach RadLightbox without having to specify TargetID for each image we want to open, and like in other lightboxes, just specify a css class or an attribute for images we need to open with RadLightbox?

[Kostadin]

Hello Hugo,

I am afraid that this is not possible but you can use the set_currentItemIndex method to access different LightBox images. For instance you can call a function each time when you click an image and pass the index of the image stored in the LightBox collection. Please check out the following code snippet.

<script type="text/javascript">

    function openLightBox(index) {

        var lightBox = $find('<%= RadLightBox1.ClientID %>');

        lightBox.set_currentItemIndex(index);
​        lightBox.show();

 

    };

</script>

Regards,
Kostadin
Telerik