Pop up image when anchor clicked using jquery

-
download Files

Examples

To popup an image give the anchor tag around the image this class: "hs-rsp-popup" Example:
<a href="image.png" class="hs-rsp-popup"><img src="image.png" alt="image"/></a>

For an iframe, set the srct of the iframe and use the class "iframe" combined with "hs-rsp-popup":
<a href="http://www.youtube.com/watch?hl=en-GB&v=2WNrx2jq184&gl=GB" class="hs-rsp-popup iframe" title="Bird is the word">Watch this</a>

You can also use this to show html content. For local content just use the id of the element for the href:
<a href="#elementid" class="hs-rsp-popup hiddendiv">click here</a>
<div id="elementid" style="display:none">Hello, World!</div>

For remote content, link to the page, for example:
<a href="http://www.hotscot.net" class="hs-rsp-popup hiddendiv">click here</a>

Setting Popup Size (image/iframe)

You can use the following html5 data attributes in your link to set the size: data-popupheight="100" data-popupwidth="300" These values are in pixels.
For Example:
<a href="image.png" class="hs-rsp-popup" data-popupheight="100" data-popupwid

Comments

Post a Comment

Popular posts from this blog

what is Event Cache table in sharepoint

-
Every Content database in SharePoint Contains an EventCache table that is the change log for objects contained in the database. Each row in this table is depicting a change in an object where columns usually contain information such as the date and time of a change, the type of object that was changed, the nature of the change, and a unique identifier for the object. EventCache table is important because it stores the list of site events for which users might have requested alerts.
Read more

CAML Query syntax and options in SharePoint

-
As Small syntax error or order of tag in spquery can result any web part (or any thing in which spquery is used) doesn’t work, I’m explaining SPQuery with example, hope which may help you. CAML (Collaborative Application Markup Language) SPQuery  is the SharePoint object which is used to perform a query operation against SharePoint data. SPList.getItems(SPQuery)  is the step, will return SPListItemCollection  which satisfies the query.SPQuery has one data member ‘ Query’ , which need to set before passing SPQuery object to  SPList . Some Properties Properties Description RowLimit Gets or sets a limit for the number of items returned in the query per page. <RowLimit>10</RowLimit> --- Can be used as: query.rowLimit = 10; ViewFields Gets or sets the fields that are displayed in the query. <ViewFields>         <FieldRef Name='Title'/>         <FieldRef Name='Name'/> </ViewFields> --- Can be used as: SP
Read more

Change anchor link url in sharepoint calender

-
here am unsing sharepoint calender to display events. The calender list is inhereted from event content type. for every event there are several columns like event name, event link(URL), Event Date...etc. for some events there may be some url in link column some may be empty. So in calender if i click the event, suppose if that event has the LINK with url then i have to redirect to the new url, if the link url is empty then i have to redirect to the event url. here when am clilcking on anchor tag in calender am calling a rest api function to get the link value of that event. am checking the link value , if value in null then am redirecting to event details and the value is not null then am redirecting to the link which am get from rest api call. here am using two mail functions which are 1)e.stopPropagation(); means it will stop the redirecting value which is assigned initially. 2)e.preventDefault(); means it will stop the default value of the anchor tag href value.
Read more