How can I show an image in lightbox using javascript?

Question

0.00/5 (No votes)

See more:

I'm working on a vb.net project.
MS Visual Studio 2008
Framework: 3.5
DB: MSSQL SERVER 2005

I need to show an image in lightbox using javascript on home(default) page of the website. For ex: when an user hit to the website then firstly automatically show him/her a lightbox which will have an image on page load of home(default) page of the website.

Now, I have two files, one is "jquery.lightbox.min.js" and other is "jquery.lightbox.css".

Image size: width X height = 400 X 550 in JPG format

Under <head> tag:
<script type="text/javascript" src="js/lightbox/jquery.lightbox.min.js"></script>

<link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.css" />

Now, please suggest me, how would i do further process?

Posted 19-Jun-16 20:35pm

Tarun Mittal Delhi

Updated 20-Jun-16 23:46pm

v3

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 20-Jun-16 3:06am

Where have you called genericPopup?

Tarun Mittal Delhi 20-Jun-16 3:08am

under script tag

Karthik_Mahalingam 20-Jun-16 6:37am

do you want to show the popup on page load or on some button click ?

Tarun Mittal Delhi 20-Jun-16 6:38am

on page load

Karthik_Mahalingam 20-Jun-16 6:38am

are you using jquery?

Tarun Mittal Delhi 20-Jun-16 6:40am

<html>
<script type="text/javascript">
$(document).ready(function(e) {
$('#popup').animate({"top":"100%","marginTop":"-200px"},500);
win.document.close();
});
</script>
<style type="text/css">
#popup
{
width:400px;
height:550px;
background:#000000;
color:#000000;
padding:5px;
position:absolute;
top:100%;
left:50%;
margin-top:-600px;
margin-left:-200px;
}
</style>
<body>
<div id="popup">
<img src="JP-and-McGW.jpg" alt="" title="" width="400" height="550" runat="server"/>
</div>
</body>
</html>

Karthik_Mahalingam 20-Jun-16 6:45am

what is the issue

Tarun Mittal Delhi 20-Jun-16 6:46am

when i'm using this code then data is not showing as a pop-up.

Karthik_Mahalingam 20-Jun-16 6:59am

win.document.close();
what is this for ?

Tarun Mittal Delhi 20-Jun-16 7:02am

for closing pop-up

Karthik_Mahalingam 20-Jun-16 7:03am

is this a loading gif?
post your exact requirement, based on that we will provide solution..
so that we will get to know that you are on right track.

Tarun Mittal Delhi 20-Jun-16 7:06am

i want to show a popup on page load.

when an user hit the website's defalut(main) page then it shows him a pop-up window which having an image. And, also user can close that pop up window after seeing it

Tarun Mittal Delhi 20-Jun-16 7:07am

image format: jpg

Karthik_Mahalingam 20-Jun-16 7:13am

ok fine.

Karthik_Mahalingam 20-Jun-16 6:45am

Always use Reply button, to post Comments/query to the user, else the User wont get notified.

Tarun Mittal Delhi 20-Jun-16 6:52am

Sir...please help me

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2016-06-20T02:27:00

Solution 1

Add this code in the Default.aspx page where you want to show the popup on load.

JavaScript

<script>
       $(function () {
           var wind = genericPopup('YourPopupPage.aspx', 500, 500, 'yes');
       });
   </script>

Posted 20-Jun-16 2:27am

Karthik_Mahalingam