Forums (Obsolete)

Portal Engine Questions on portal engine and web parts.

Version 5.x > Portal Engine > Adding lightbox to the images doesn't work...

View modes:

Certified Developer v7

Certified Developer v7

Gitesh - 3/17/2011 10:05:08 PM

Adding lightbox to the images doesn't work...

Hi guys,

I have added kentico lightbox to our images but it only works with some code.

1st Example:
Works with the below code:

<a href="<%# GetDocumentUrl() %>" rel="lightbox[group]" rev="<%# Eval("NodeAliasPath") %>" title="<%# Eval("FileDescription", true) %>">
<img src="<%# GetFileUrl("FileAttachment") %>?maxsidesize=150" alt="<%# Eval("FileName", true) %>" />
</a>

Doesn't work with the below code:

<a style="display: block;" rel="lightbox[group]" href="/getattachment/7c6ab265-82bd-4d21-8e93-98b9ed26fcf9/News/Project-Updates/Western-Berths-(1).aspx?height=600" rev="/getattachment/7c6ab265-82bd-4d21-8e93-98b9ed26fcf9/News/Project-Updates/Western-Berths-(1).aspx?height=600">
<img src="/getattachment/7c6ab265-82bd-4d21-8e93-98b9ed26fcf9/News/Project-Updates/Western-Berths-(1).aspx?width=200">

</a>

2 Example :

Doesn't work with the below code:
<%# IfEmpty(Eval("NewsTeaser"), "", GetImage("NewsTeaser")) %>

Could someone tell me why is it not working with those 2 codes?

Thanks
Gitesh Shah

Kentico Developer

Kentico Developer

kentico_ivanat - 3/29/2011 2:13:09 AM

RE:Adding lightbox to the images doesn't work...

Hi,

the lightbox webpart displays correctly images from documents. If you would like to use lightbox with attachments, please use Attachment image gallery webpart with transformation:


<a style="text-decoration: none;" href="<%# GetAttachmentUrl(Eval("AttachmentName"), Eval("NodeAliasPath")) %>" rel="lightbox[attachments]" rev="<%# Eval("AttachmentID") %>" title="<%# Eval("AttachmentName", true) %>">
<img style="border: none;" src="<%# IfCompare(ImageHelper.IsImage((string)Eval("AttachmentExtension")), true, GetAttachmentIconUrl(Eval("AttachmentExtension"), null), GetAttachmentUrl(Eval("AttachmentName"), Eval("NodeAliasPath"))) %>?maxsidesize=150" alt="<%# Eval("AttachmentName", true) %>" />
</a>

The second example does not genarate a lightbox code. GetImage method returns only <img src="" ... /> code.

Best regards,
Ivana Tomanickova

Certified Developer v7

Certified Developer v7

Gitesh - 3/31/2011 10:55:20 PM

RE:Adding lightbox to the images doesn't work...

Hi Ivana,

Thanks for the help.
That works perfect.
One more question related to this,

I have some images in Properties>Attachment.
Now I go to that page and add an inline control to it:
%%control:AttachmentImageGallery?%%

This works exactly as I want, but is there a way where I can select an image from that attachments (I dont want all images to come just 1)

I tried the below code but it didn't work:
%%control:AttachmentImageGallery?image.jpg%%

Thanks
Gitesh Shah

Kentico Developer

Kentico Developer

kentico_ivanat - 4/5/2011 3:40:49 AM

RE:Adding lightbox to the images doesn't work...

Hi,

you could modify the code of Document attachment inline control:

~/CMSInlineControls/DocumentAttachments.ascx.cs

In the code behind (Page_Load method) add following code (around line 41):
ucAttachments.TopN = 1;

Only one attachment will be selected in this case. To select the correct one you can set the OrderBy property as well.

ucAttachments.OrderBy ="order by condition";

The content is cached so please open the page in another browser to see the newest control output during your tests.

Best regards,
Ivana Tomanickova


Certified Developer v7	Gitesh - 4/5/2011 4:20:56 PM RE:Adding lightbox to the images doesn't work... Hi Ivana, That sounds that it will work. But we are looking for a frontend solution. Means customer goes in the CmsEditor uploads an attachment then goes to the TextEditor and keeps an inline control for that image. So the only selected image is shown and the image will then pop-up as a Lightbox. Thanks Gitesh Shah

Kentico Developer

Kentico Developer

kentico_ivanat - 4/12/2011 5:31:10 AM

RE:Adding lightbox to the images doesn't work...

Hi,

I am not sure if I understand your point.

1. A customer comes to Properties of document - Attachments and uploads attachments.
2. He inserts an inline control into Editable text webpart to display attachments of document.
3. Only one image should be displayed and a customer should be able to decide which one it will be.

Is the above scenario correct?

If yes, you could use the method I described in the previous post. Then in Properties - Attachments a customer should move attachments using up and down arrow. Only the last or the first attachment could be displayed using the inline control.

If this solution is not suitable for you - where exactly would you like to select which attachment will be displayed by inline control?

Thank you for information.

Best regards,
Ivana Tomanickova

Certified Developer v7

Certified Developer v7

Gitesh - 5/13/2011 12:37:53 AM

RE:Adding lightbox to the images doesn't work...

Hi Ivana,

Is it possible to get the attachments to read the images from Media library instead of uploading a new image everytime?

Or

We tried the below :

We created a new field called image1
Field attribute/type:

Attribute type: Text
Attribute size: 300
Field type: Media selection

Transformation of the lightbox webpart looks like this:

<a href="<%# Eval("Image1") %>" rel="lightbox">
<%# IfEmpty(Eval("Image1"), "","<img src=\"" + (Eval("Image1")) + "" + GetDocumentUrl() + "?width=150\" alt=\"\" style=\"width: 150px;\" />") %>
</a>

We can see the thumbnails but the lightbox doesn't open with the big image.

I am sure the link for the lighbox (for the big image) is goign to the wrong place.

Any suggestions?

Thanks
Gitesh Shah

Kentico Developer

Kentico Developer

kentico_ivanat - 5/16/2011 1:51:25 AM

RE:Adding lightbox to the images doesn't work...

Hi,

you could use jquery lightbox to achieve your goal. Integration of jquery is described here (on the bottom).

The transformation displaying content of media selector field should look like:


<a href="<%# Eval("documentSelectorColumn") %>">
<%# IfEmpty(Eval("documentSelectorColumn"), "","<img src=\"" + (Eval("documentSelectorColumn")) +"\" style=\"width: 150px;\" />") %>
</a>

Then the image will be displayed with a lightbox effect.

Best regards,
Ivana Tomanickova

Top