LightBox is opening in a new window!
i have gone though many other old discussion on subject , have tried have read nothing seemes working if have @ @ code below helpful maybe have missed think
i add first time coding super **** (pardon french)
thanks
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>portfolio</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* beginoawidget_instance_2127022: #gallery */
.lbgallery {
/*gallery container settings*/
background-color: transparent;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
width: 540px;
height: auto;
text-align:left;
}
.lbgallery ul { list-style: none; margin:0;padding:0; }
.lbgallery ul li { display: inline;margin:0;padding:0; }
.lbgallery ul li a{text-decoration:none;}
.lbgallery ul li img {
/*border color, width , margin images*/
border-color: transparent;
border-left-width: 10px;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px:
}
.lbgallery ul li a:hover img {
/*background color on hover*/
border-color: #000000;
border-left-width: 10px;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
}
#lightbox-container-image-box {
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
}
/* endoawidget_instance_2127022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="main" role="main">
<!-- section #1 / intro -->
<section id="first" class="story" data-speed="8" data-type="background">
<div class="smashinglogo" data-type="sprite" data-offsety="100" data-xposition="50%" data-speed="-2"></div>
<article><img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" /></article>
</section>
<!-- section #2 / background -->
<section id="second" class="story" data-speed="4" data-type="background">
<div class="smashinglogo2" data-type="sprite" data-offsety="100" data-xposition="50" data-speed="-2"></div>
<article>
<div id="gallery" class="lbgallery">
<ul>
<li> <a href="images/lightboxdemo1.jpg" title=""><img src="images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="flower" /></a> </li>
<li> <a href="images/lightboxdemo2.jpg" title=""><img src="images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="tree" /></a> </li>
<li> <a href="images/lightboxdemo3.jpg" title=""><img src="images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /></a> </li>
<li> <a href="images/lightboxdemo4.jpg" title=""><img src="images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /></a> </li>
<li> <a href="images/lightboxdemo5.jpg" title=""><img src="images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /></a> </li>
</ul>
</div>
<script type="text/javascript">
// beginoawidget_instance_2127022: #gallery
$(function(){
$('#gallery a').lightbox({
imageloading: '/images/lightbox/lightbox-ico-loading.gif', // (string) path , name of loading icon
imagebtnprev: '/images/lightbox/lightbox-btn-prev.gif', // (string) path , name of prev button image
imagebtnnext: '/images/lightbox/lightbox-btn-next.gif', // (string) path , name of next button image
imagebtnclose: '/images/lightbox/lightbox-btn-close.gif', // (string) path , name of close btn
imageblank: '/images/lightbox/lightbox-blank.gif', // (string) path , name of blank image (one pixel)
fixednavigation: false, // (boolean) boolean informs if navigation (next , prev button) fixed or not in interface.
containerresizespeed: 400, // specify resize duration of container image. these number miliseconds. 400 default.
overlaybgcolor: "#999999", // (string) background color overlay; inform hexadecimal value like: #rrggbb. rr, gg, , bb hexadecimal values red, green, , blue values of color.
overlayopacity: 0.9, // (integer) opacity value overlay; inform: 0.x. x number 0 9
txtimage: 'image', //default text of image
txtof: 'of'
});
});
// endoawidget_instance_2127022
</script>
</article>
</section>
<!-- section #3 / photos -->
<section id="third" class="story" data-speed="6" data-type="background" data-offsety="250">
<div class="photograph" data-type="sprite" data-offsety="1250" data-xposition="25%" data-speed="2"></div>
<article>
<h2>scrolling sprites</h2>
<div class="textbox">
<p>the next step in parallax scrolling adventure create sprites!</p>
<p>i have cut out 1 of photos in background , use sprite. scrolls @ different speed background <i>and</i> window, , it's effect that's used on nike better world , other parallax sites..</p>
<p>using many sprites can slow down older computers, , need use clever maths (and trial & error!) work out placement on page.</p>
</div>
</article>
</section>
<!-- section #4 / html5 video -->
<section id="fourth" class="story" data-speed="8" data-type="background" data-offsety="250">
<article>
<h2>html5 video</h2>
<div class="textbox">
<p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo.</p>
<p>vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. donec eu libero sit amet quam egestas semper. aenean ultricies mi vitae est. mauris placerat eleifend leo.</p>
<p>pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. o.</p>
</div>
</article>
<video controls width="640" height="480" data-type="video" data-offsety="2400" data-speed="1.5">
<source src="video/parallelparking.theora.ogv" type="video/ogg" />
<source src="video/parallelparking.mp4" type="video/mp4" />
<source src="video/parallelparking.webm" type="video/webm" />
</video>
</section>
<!-- section #5 / end-->
<section id="theend" class="story" data-speed="8" data-type="background" data-offsety="250">
<div class="byebye" data-type="sprite" data-offsety="-1600" data-xposition="50%" data-speed="-2"></div>
</section>
</div> <!-- // end of #main -->
<!-- our javascript, starting jquery -->
<script src='js/libs/jquery-1.6.1.min.js'></script>
<script src="js/script.js"></script>
<!--[if lt ie 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>dd_belatedpng.fix("img, .png_bg");
<![endif]-->
</body>
</html>
for questions this, need see link live test page. don't forget upload scripts , other supporting files remote server.
nancy o.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment