Fancybox implementation with teaser image not working

Manorama Patil asked on July 5, 2018 12:52

Hi All,

I am using kentco 7. I am not able to implement fancybox on custom document details page for teaser image but fancy box with document attachment is working.

Below is the code which is working

<a href="<%# GetAbsoluteUrl(GetAttachmentUrl(Eval("AttachmentName"), Eval("NodeAliasPath")), Eval<int>("AttachmentSiteID")) %>" rel="lightbox" class="view-image" aria-hidden="true"><i class="fa fa-search fa-lg" aria-hidden="true"></i></a>

Transformation for custom document is as below

<a href="<%# GetAbsoluteUrl(Eval<string>("CollectionTeaserImage")) %>" rel="lightbox" class="view-image" aria-hidden="true"><%# IfEmpty(Eval("CollectionTeaserImage"), "", "<img alt=\"" + Eval("CollectionName",true) + "\" src=\"" + GetFileUrl("CollectionTeaserImage") + "?maxsidesize=320\" align=\"center\" hspace=\"5\" vspace=\"5\" />") %>.

CollectionTeaserImage is field name of attribute type file. How can I get absolute url of teaser imge. Fancybox error is The requested content cannot be loaded.Please try again later.

Please advice.

kentico 7 fancybox

Recent Answers

Brenden Kehren answered on July 5, 2018 13:32

What does the field CollectionTeaserImage contain? URL? GUID? When you view the source, what is in the href or src attribute for a value?

0 votesVote for this answer Mark as a Correct answer

Manorama Patil answered on July 5, 2018 14:36

<a href="http://mysite.ae/CMSPages/cdfc4f86-b87d-4ec3-b84d-a0b5d437ac2b" rel="lightbox" class="view-image" aria-hidden="true"><img alt="Family" src="/getattachment/cdfc4f86-b87d-4ec3-b84d-a0b5d437ac2b/Family.aspx?maxsidesize=320" align="center" hspace="5" vspace="5"></a> This is the view source content.

0 votesVote for this answer Mark as a Correct answer

vasu yerramsetti answered on July 5, 2018 19:51 (last edited on July 5, 2018 19:53)

@Manorama,

As per your view source content, It is render GUID. What value you are expecting in href?

Refer below posts:

https://devnet.kentico.com/articles/creating-a-simple-media-library-gallery-with-the-lightbox-effect

https://devnet.kentico.com/articles/how-to-create-a-lightbox-image-gallery?feed=DevNet-Articles-RSS

0 votesVote for this answer Mark as a Correct answer

Manorama Patil answered on July 5, 2018 22:37

Collections is a custom document type which has a field CollectionTeaserImage with attribute type file. On the collection details page I am able to show image using code src='GetFileUrl("CollectionTeaserImage")'. I want to add fancybox effect onclick of this image. If I add the same image path code to <a href="GetFileUrl("CollectionTeaserImage")">, a popup opens with garbage data. If I add <a href="<%# GetAbsoluteUrl(Eval<string>("CollectionTeaserImage")) %>"> a popup opend with message 'The requested content cannot be loaded. Please try again later.'

Please advice

0 votesVote for this answer Mark as a Correct answer

Manorama Patil answered on July 8, 2018 08:37

Hi all,

Any suggestions to fix above issue? Please guide

0 votesVote for this answer Mark as a Correct answer

vasu yerramsetti answered on July 8, 2018 15:17

@Manorram

Please try to change the CollectionTeaserImage field with attribute type to text and select Form Control as a Media selection.

0 votesVote for this answer Mark as a Correct answer

Manorama Patil answered on July 8, 2018 21:21

@Vasu Thank You so much Mr. Vasu for your suggestion. with your trick the problem is solved.

0 votesVote for this answer Mark as a Correct answer