Setting javascript function for all <a> - lightbox

I have a lightbox script that Im using:
<a class="lb-image-link" href="images/image-1.jpg" data-lightbox="lb-set">
<img class="lb-image" src="images/thumb-image-1.jpg" width="150" height="150"/></a>
But for my clients sake to use CMS software I need to make the data-lightbox="lb-set" function work for all <a> tag on the page or to make it work as a class somehow if possible.
The page is HTML, how can I make this work? Im guessing I need to create javascript for this. Any help is greatly appreciated, thank you

One way would be to learn some jquery, if you are not already familiar with it
http://jquery.com/
and then you can easily attach a function to all click events on every a tag on the page with something like:
$("a").click(function(event) {
//your lighbox code goes here ...
});
EDIT
With the lightbox2 script you are using it doesn't look like there is a way to assign it to a group of links on your page based on class or tag type, so the above function is not relevant. At a quick glance, if you stick with that script the only way to have it work on multiple links on the same page is to include a unique data-lightbox="" attribute in each link, eg.
image #1
image #2
image #3
There are other lightbox scripts that allow you to set the lightbox based on tag type or class, for instance http://fancyapps.com/fancybox/ allows you to do the following:
<a class="fancybox" rel="group" href="big_image_1.jpg">image #1</a>
<a class="fancybox" rel="group" href="big_image_2.jpg">image #2</a>
and then use the script
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
the above essentially attaches the fancybox lightbox to anything that has a class="fancybox"
Not sure if that helps - there may not be much difference for you having to add a unique data-lightbox="image-3" to each link as apposed to adding a standard class to them :-)
Glen

Related

iframe that updates html

I am trying to build an iframe that reacts to the URL that is being inputted.
For example if the user goes to:
domainA.com/somethingnice then the iframe src should be sub.domainB.com/somethingnice
so basically always following the path.
I also plan to use javascript to hide the frame src - something like this:
<script type="text/javascript">
$(document).ready(function(e) {
$('iframe').attr('src','https://sub.domainB.com/');
});
</script>
<body>
<iframe src="" />
</body>
But I have no clue even where to start in making that src to change based on the user's links or inputs.
Any ideas are really welcome!
BTW: the src should NOT change if the users click anywhere inside the iframe - it should act just like a normal wesbite. Only when they follow an external (or direct) link to that subdomain the src for the iframe should be rewritten
Thank you!

Javascript won't work on Html server control?

I am writing a website with ASP.Net.
I will have lots of html generic controls like <div> <span> and so on..
I have some onclick javascript functions, onmouseover javascript functions..
They are working fine..
Then I need to control them on the server side.
So, I add runat="server"..
After that, all the javascripts aren't working anymore..
I understand they aren't working coz all the events are now going back to server side.
So, is there anyway to make them work??
For eg,
<div id="myDiv1" onclick="myfunction(para1)"><img src="..." /></div>
the above code is working..
<div id="myDiv1" runat="server" onclick="myfunction(para1)"><img src="..." /></div>
the above code is not working...
I can make it work, probably by
<div id="externalDiv1" onclick="myfunction(para1)"><div id="myDiv1" runat="server" ><img src="..." /></div></div>
Is there any other way?
I assume that you used document.getElementById() to get an element by its id. If you are using master pages, the IDs of server controls will be changed after rendering to the page, in that case, you have to use its ClientID
for e.g.
var myDiv1 = document.getElementById("<%= myDiv1.ClientID %>");
Server-side or client-side controls makes no difference as far as javascript is concerned. ALL server-side controls end up being rendered as normal HTML controls. If your javascript functions are not working might be because you are accessing them by the wrong id since by making them server-side controls they can now have ids that follow a pattern like <parent_id>_<control_id>.
For example, a span element declared like this:
<span id="mylabel" runat="server"> testing</span>
may end up being rendered as:
<span id="MainContent_mylabel"> testing</span>
ASP.NET 4.0 has a feature called CliendIDMode which can be set to static, meaning, that your ids on the markup will stay unchanged after the page is rendered.

ASP.NET 4.0 DataList problem - Facebook Like Button doesn't show up

I have a problem with placing Facebook Like Button inside a DataList control. I want to dynamicly create a Like Button for every DataList element. The problem is that it does show up only in IE. It doesn't work in other browsers.
Here is the code placed inside DataList control:
<fb:like href="<%#"http://www.mojsekret.net/Komentarze.aspx?ID=" + Eval("ID")%>" send="false" layout="button_count" width="450" show_faces="true" font="">
<br>
</fb:like>
And here is the script attachment:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script>
So it is basic stuff generated from facebook dev site. Has anyone encountered similar problem? Please guys, help me.
BTW: I did the same thing with Google +1 button and it's working. Code:
<g:plusone href='<%#"http://www.mojsekret.net/Komentarze.aspx?ID=" + Eval("ID")%>'></g:plusone>
Try removing the <br> inside the fb:like tag. Also make sure you are only rendering one <div id="fb-root"> on your whole page.

How to WelCome control in Webpart code?

I need to place a webpart on the page. The webpart need to change Welcome control title. I need to change "WelCome UserName" to "UserName".
I tried http://www.wictorwilen.se/Post/Having-fun-with-the-SharePoint-Welcomeascx-control.aspx , But it did not worked in Webpart. If anybody have idea to change this control. Please share with me.
That article is a pretty comprehensive walkthrough of one way to do this - perhaps your focus should be to determine where you have gone wrong in the implementation of it?
An alternative (hacky) method would be to put some javscript into the page using a CEWP or modifying the master page that will search for the welcome string and remove it.
Hint - don't search for "Welcome", search for its container which looks a little like this (some attributes stripped out for clarity
<span title="Open Menu">
<div id="zz7_Menu_t" ...
class="ms-SPLink ms-SpLinkButtonInActive" >
<a accesskey="L" id="zz7_Menu" ... href="#" serverclientid="zz7_Menu"
menutokenvalues="MENUCLIENTID=zz7_Menu,
TEMPLATECLIENTID=zz3_ID_PersonalActionMenu">
Welcome UserName
</a>
</div>
</span>
Some links to get you started
http://www.dlocc.com/articles/style-a-page-using-the-content-editor-web-part-and-css/
http://www.cleverworkarounds.com/2008/02/28/more-sharepoint-branding-customisation-using-javascript-part-2/
http://blog.pathtosharepoint.com/2008/08/10/the-content-editor-web-part/

ASP.NET Img tag

I have a problem with how ASP.Net generates the img tag.
I have a server control like this:
<asp:Image runat="server" ID="someWarning" ImageUrl="~/images/warning.gif" AlternateText="Warning" />
I expect it to generate this:
<img id="ctl00_ContentPlaceHolder1_ctl00_someWarning" src="../images/warning.gif" />
but instead it generates this:
<img alt="" src="/Image.ashx;img=%2fimages%2fwarning.gif"</img>
This give me errors when I execute the following js:
document.getElementById('ctl00_ContentPlaceHolder1_someWarning')
Any idea why it won't generate the expected html?
Looks like it's trying to use a custom handler (ashx) to deliver the image. Do you have any additional modules that may be overriding the default behaviour of the asp:Image?
Your JavaScript won't work because the image tag has not been given an ID in the HTML that was generated.
You can get the actual ID that is generated by using ClientID. I use this to get the ID of a control for use in JavaScript using syntax similar to the following:
document.getElementById('<%=ddlCountry.ClientID%>').style.display = "block";
However you can also use it in your code-behind to get the same thing.

Resources