How can I show an image in lightbox using javascript?

Question

2.00/5 (1 vote)

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?

What I have tried:

<html>
<head>
<link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.css" />
<script type="text/javascript" src="js/lightbox/jquery.lightbox.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>
</head>

<body>

</body>
</html>

Posted 21-Jun-16 0:59am

Tarun Mittal Delhi

Updated 21-Jun-16 1:02am

v2

Add a Solution

Comments

F-ES Sitecore 21-Jun-16 7:05am

We don't know what plug-in you are using so we don't know how to implement it. Refer to the docs the plug-in is for, or pick a lightbox plug in yourself and follow the instructions.

Tarun Mittal Delhi 21-Jun-16 7:16am

Dear Expertiser,

Thanks for replying on my query.

Now, please take a look into the code:

<link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.css" />
<script type="text/javascript" src="js/lightbox/jquery.lightbox.min.js"></script>
<style type="text/css">
.lightbox-border
{
padding: 5px;
border: solid 1px #EFEFEF;
}
.lightbox-border:hover
{
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.lightbox').lightbox();
});
</script>

<div class="lightbox">


</div>

Now, the issue is occuring that...Image is showing with lightbox but close button is not displaying. And, how can i do it on pageload event?
can you please help me?

F-ES Sitecore 21-Jun-16 7:26am

What lightbox plugin are you using? Where did you download the script files from?

Tarun Mittal Delhi 21-Jun-16 7:38am

version: 1.5.5

i don't know that location. Because i'm new on this project which was developed by some other programmer. And, these plugins are also using in the project on click event for showing pdf and image.

F-ES Sitecore 21-Jun-16 7:55am

If you don't know what the plug in is it's going to be hard to find the documentation. Someone might recognise the plug in from the urls maybe. Look at the js and css file to see if there are comments that say what the source of the plug-in is.

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)