I am writing an web app in asp.net,
I have in my DB URL of my images and I want to
display all the images from my DB wrapped with lightbox my code so far is:
<script type="text/javascript" src="Lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Lightbox/js/scriptaculous.js?load=effects,builder> </script>
<script type="text/javascript" src="Lightbox/js/lightbox.js"></script>
<a rel="lightbox" id="userImageLightBox" runat="server" title="profile image">
<img id="userImage" runat="server" width="150" height="146" alt="" src=""/>
</a>
so my question is:
how can i insert all my images using foreach from the code behind, that when i click on the
image the lightbox will activate
thanks
Use a ListView which will give you total control over the markup as well as clean HTML. Use a HttpHandler (other Q's on SO on this topic - do a search) to retrieve image from DB and serve it up.
In your ListView, use ItemTemplates to contain markup for each image. Images can be obtained by using the following syntax for each img source attribute.
src='ImageHandler.ashx?imageID=<%# Eval("ImageName")%>'
Related
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
When my page is loaded I cannot see calendar:
When I click on the birthday field of the form it appears, but it does not look as I expect:
The code I use to display in jsp file:
<label for="birthday">Birthday<br/> </label>
<sf:input path="birthday" id="birthday"
pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}"/><br/>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId:"birthday",
widgetType:"dijit.form.DateTextBox",
widgetAttrs:{ datePattern:"dd-MM-yyyy", required:true }}));
</script>
So my questions are:
How to make calendar always visible as soon as the form is loaded?
How can I manage with its css, so I could set backgournd and other properties via css file? If it is not possible, then via JavaScript params.
Thanks.
In order the calendar works I had to set the following css class to the html body element:
<body class="tundra">
It helped.
I have a page in c# that redirects to another page like
Response.Redirect("default.aspx?name=" + user.Firstname + "&surname=" + user.Lastname).
default.aspx has a lightbox. I want to open this lightbox when I redirect the page that include this lightbox. Also, I want to show the parameters in that lightbox input fields. Is there a way to achieve this?
Thanks for any help.
I am afraid you cannot do it with Lightbox.
Lightbox plugin works on <a> tag and fetches value form href attribute. Also it specially design for Images as you can see if you provide a URL to page it doesnt load it.
For Intance,
if you provide,
<a href="page.html" id="a1" >Click Me</a>
it will keep showing the loading page.
Instead try using thickbox to show the current user parameters.
For thickbox to show a page you can use
<script language="javascript" type="text/javascript" src="javascript/thickbox.js"></script>
<a id="a1" href="#" title="Click me" class="thickbox">Call me</a>
<script type="text/javascript" >
$(document).ready(function(){
var anchor = document.getElementById("a1");
var username= '<%= Request.QueryString["username"]%>';
var url="second.html?height=500&width=700&modal=true&TB_iframe=true&username="+username;
$('#a1').attr("href", url);
anchor.click();
});
</script>
Let me know if it worked.
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.
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.