Can i wrap hyperlink around picture?
Hi,
I have employee custom module. In this module i am displaying employee information including employee picture. Everything is working fine and now as per requirements I have to change that image to "Hyper Link" and on click I have to display a dialog where i have to validate email address so that picture will be allowed to download.
Could please anyone help me how to make employee image a hyperlink and also how to navigate it to the dialog box?
Will appreciate any help.
Kind Regards,
Waseem
You could do that with jQuery perhaps?
$(document).ready(function() $("#yourrootdiv img").wrap("<a class='openelement' href='#' />") ; //Wrap the images in an anchor $(".openelement").click(function(e) //Code to Open your dialog goes here e.preventDefault(); ););Hi Steve,
I have picture coming from DB in Sitefinity AssetsField and also i have converted the list template into my own SfCtrlPresentation User Control so in this way wouldn't i be pretty much helpless in using out of box options? Really appreciate your help. Thanks!
Could you please help me, following is the code snippet
Great thanks, can you give me the rendered markup for one list item?
Steve, I am very much new to Sitefinity and JQuery. Could you please advice me how to get the rendered markup?
Just right-click on your browser and go to view source, then find a single <li class="sfitem node and paste it in if you could :)
Try this template, then click on a picture
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="OpenAccessDataProvider,a4a794260c0b4440b466f75d11146db8.ascx.cs" Inherits="SitefinityWebApp.SfCtrlPresentation.OpenAccessDataProvider_a4a794260c0b4440b466f75d11146db8" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"> <LayoutTemplate> <ul class="sfitemsList sfitemsListTitleDateTmb employeeList"> <asp:PlaceHolder ID="ItemsContainer" runat="server" /> </ul> </LayoutTemplate> <ItemTemplate> <li class="sfitem sfClearfix"> <h2 class="sfitemTitle"> <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="Title" runat="server" /> </h2> <sf:AssetsField ID="AssetsField1" runat="server" DataFieldName="Picture"/> <sf:SitefinityLabel ID="SitefinityLabel1" runat="server" Text='<%# Eval("Designation")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" /> <sf:SitefinityLabel ID="SitefinityLabel2" runat="server" Text='<%# Eval("CompanyName")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" /> <sf:AssetsField ID="AssetsField2" runat="server" DataFieldName="Documents"/> </li> </ItemTemplate></telerik:RadListView><sf:Pager id="pager" runat="server"></sf:Pager><script type="text/javascript"> $(document).ready(function () $(".employeeList .sfimageWrp img").click(function () alert("HEY THERE " + $(this).attr("src")); //This can be removed //Remove the alert and add in the code to open your dialog somehow ); );</script>Steve Thank you very much for your help. It is working now. just looked for the list name and replaced it with .employeeList and its working absolutely fine now. :)
Thanks once again!
..perhaps jQuery isnt loaded, try this
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="OpenAccessDataProvider,a4a794260c0b4440b466f75d11146db8.ascx.cs" Inherits="SitefinityWebApp.SfCtrlPresentation.OpenAccessDataProvider_a4a794260c0b4440b466f75d11146db8" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><sf:ResourceLinks runat="server" UseEmbeddedThemes="true" Theme="Basic"> <sf:ResourceFile JavaScriptLibrary="JQuery"/></sf:ResourceLinks><telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"> <LayoutTemplate> <ul class="sfitemsList sfitemsListTitleDateTmb employeeList"> <asp:PlaceHolder ID="ItemsContainer" runat="server" /> </ul> </LayoutTemplate> <ItemTemplate> <li class="sfitem sfClearfix"> <h2 class="sfitemTitle"> <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" TextDataField="Title" runat="server" /> </h2> <sf:AssetsField ID="AssetsField1" runat="server" DataFieldName="Picture"/> <sf:SitefinityLabel ID="SitefinityLabel1" runat="server" Text='<%# Eval("Designation")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" /> <sf:SitefinityLabel ID="SitefinityLabel2" runat="server" Text='<%# Eval("CompanyName")%>' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemShortTxt" /> <sf:AssetsField ID="AssetsField2" runat="server" DataFieldName="Documents"/> </li> </ItemTemplate></telerik:RadListView><sf:Pager id="pager" runat="server"></sf:Pager><script type="text/javascript"> $(document).ready(function () $(".employeeList .sfimageWrp img").click(function () alert("HEY THERE " + $(this).attr("src")); //This can be removed //Remove the alert and add in the code to open your dialog somehow ); );</script>I had to disable its own link and wrap internal div into my link
<sf:DetailsViewHyperLink runat="server" Enabled="false">
<a href="/news-and-events/all-news/news-details?id=<%# Eval("Id")%>">
<sf:DetailsViewHyperLink runat="server" Enabled="false"> <a href="/news-and-events/all-news/news-details?id=<%# Eval("Id")%>"> <div class="news-image"> <img src='<%# Eval("Image.MediaUrl")%>' alt='<%# Eval("Image.AlternativeText")%>' title='<%# Eval("Image.Title") %>' style="width:222px; height:171px;" /> </div> <div class="news-content"> <sf:FieldListView ID="Title" runat="server" Text="0" Properties="Title" WrapperTagName="h3" EditableFieldType="ShortText" /> <p class="date"><sf:FieldListView ID="PublicationDate" runat="server" Format="PublicationDate.ToLocal():dd MMM yyyy" /></p> </div> </a></sf:DetailsViewHyperLink>You don't need to wrap the <a> with <sf:DetailsViewHyperLink runat="server" Enabled="false">.
This is how I did it:
<a href="/<%# Eval("FilePath")%>" target="_blank">
<span class="download-name"><%# Eval("Title")%></span>
</a>