jQuery Grid Plugin - jqGridForum

Topic RSS

Lightbox integration

06/12/2009
17:51

bryanh

New Member

Members

Forum Posts: 2

Member Since:
05/12/2009

Offline

I am new to jqgrid, thank you for the great work. I am building an application that retrieves a list of image files, and it would be a great ui enhancement if the user could simply click the image link in my grid and have it open in lightbox.

I have lightbox working on my site outside of jqgrid and it works correctly, the only requirement with the version of lightbox I am using is to add the class="lightbox" to the href.

My grid is retreiving the links in the correct format with the lightbox class attribute, but clicking it only opens the image in a new browser window, bypassing lightbox.

I would be gratefull for any help on this. I'm not especially strong in javascript, so if you could keep it simple Smile

Thanks again.

07/12/2009
09:48

Rumen[Trirand]

Moderator

Members

Moderators

Forum Posts: 81

Member Since:
08/10/2009

Offline

Hello,

Are you using custom or link formatter for displaying the link for the image inside the grid? Can you please use FireBug or some other debugging tool to make sure it is indeed in the correct format?

You can use the examples we provide

http://trirand.com/jqgrid/jqgrid.html

and especially the "New in 3.4 -> Custom Formatter" example to see how you can provide custom format for a grid cell.

Trirand ASP.NET WebForms & MVC components based on jQuery & ThemeRoller

http://www.trirand.net

07/12/2009
16:12

bryanh

New Member

Members

Forum Posts: 2

Member Since:
05/12/2009

Offline

Hi, I had not been using the formatter, I simply formed the href in the xml response from my php script, here is a snippet of the Firebug response:

<?xml version='1.0' encoding='utf-8'?><rows><page>1</page><total>4</total><records>119</records><row id='10433'><cell>10433</cell><cell><![CDATA[<a href ="../images/bottoms028.jpg" title="bottoms028.jpg" class = "lightbox" >bottoms028.jpg</a>]]></cell><cell>174.115.140.241</cell><cell>2009-12-07 00:37:12</cell><cell><![CDATA[Canada]]></cell><cell></cell><cell></cell></row>.....</rows>

I need the link to have a class attribute of "lightbox" and title attribute (which become the image caption in lightbox.

Outside of a jqgrid, this href will properly trigger lightbox (cut from the above xml and tested by itself):

<a href ="../images/bottoms028.jpg" title="bottoms028.jpg" class = "lightbox" >bottoms028.jpg</a>


So, using the same link, it works when not in a grid, and does not work inside  a grid(it opens the image in the browser window). I know the lightbox.js is included properly (all my pages have a common php include for the html head).
I have tried different load orders for the js with no effect.


If I need to use the formatter or custom formatter, looking at docs I am not clear on how I would send a class and title attribute .


Thanks again for any help.

07/12/2009
18:15

markw65

Member

Members

Forum Posts: 179

Member Since:
30/07/2009

Offline

I think the problem is that lightbox scans the page when it initializes, and modifies any links with the "lightbox" class (presumably adding a click handler). But it doesnt dynamically alter links that are created later.

Im not familiar with lightbox, but I would guess that it has a way of modifying a dynamically created link. Presumably there is a method you can call on the link (or a handler you can add manually).

So you would need your own formatter, which calls the grid's link formatter, and then does whatever lightbox needs you to do.

Mark

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
51 Guest(s)

Currently Browsing this Page:
1 Guest(s)