This is a migrated thread and some comments may be shown as answers.

Lightbox automatically applied to image links

5 Answers 45 Views
LightBox
This is a migrated thread and some comments may be shown as answers.
Dylan
Top achievements
Rank 1
Dylan asked on 17 Jan 2014, 07:34 PM

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>

5 Answers, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 22 Jan 2014, 01:43 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Dylan
Top achievements
Rank 1
answered on 03 Feb 2014, 04:51 PM
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.



0
Kostadin
Telerik team
answered on 06 Feb 2014, 04:05 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Hugo Augusto
Top achievements
Rank 2
Veteran
answered on 18 Feb 2015, 08:10 PM
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?
0
Kostadin
Telerik team
answered on 23 Feb 2015, 11:18 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
LightBox
Asked by
Dylan
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Dylan
Top achievements
Rank 1
Hugo Augusto
Top achievements
Rank 2
Veteran
Share this question
or