PDA

View Full Version : Lightbox2, image opens in new window!


Legacy14
07-29-2011, 08:48 PM
1) Script Title: Lightbox2 inside TinySlideshow v1

2) http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

http://www.scriptiny.com/2008/12/javascript-slideshow/

3) Describe problem: I'm creating a photography portfolio website. I have the images that I want to utilize lightbox2, inside TinySlideshow V1. When I click on the image, for example lets use the SEA TURTLE code, it opens in a new window. Can someone help me out or let me know what I'm doing wrong? Much appreciated!

______________________________________








<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photography Portfolio</title>

</head>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


<link rel="stylesheet" type="text/css" href="css/photo.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" />
</head>

<body>


<center>
<table width="652" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/shell_images/tl.png" width="48" height="44" /></td>
<td><img src="images/shell_images/tl2.png" width="184" height="44" /></td>
<td><img src="images/shell_images/tm.png" width="184" height="44" /></td>
<td><img src="images/shell_images/tr2.png" width="184" height="44" /></td>
<td><img src="images/shell_images/tr.png" width="52" height="44" /></td>
</tr>
<tr>
<td height="152"><img src="images/shell_images/l.png" width="48" height="265" /></td>


<td colspan="3" rowspan="2" align="center" valign="top" bgcolor="black">

<ul id="slideshow">
<li>
<h3>TinySlideshow v1</h3>
<span>photos/orange-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
</li>
<li>
<h3>Sea Turtle</h3>
<span>photos/sea-turtle.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="photos/sea-turtle.jpg" rel="lightbox"><img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
</li>
<li>
<h3>Red Coral</h3>
<span>photos/red-coral.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a>
</li>
<li>
<h3>Coral Reef</h3>
<span>photos/coral-reef.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/coral-reef-thumb.jpg" alt="Coral Reef" /></a>
</li>
<li>
<h3>Blue Fish</h3>
<span>photos/blue-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/blue-fish-thumb.jpg" alt="Blue Fish" />
</li>
<li>
<h3>TinySlideshow v.2</h3>
<span>photos/yellow-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
</li>
<li>
<h3>Squid</h3>
<span>photos/squid.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/squid-thumb.jpg" alt="Squid" /></a>
</li>
<li>
<h3>Small Fish</h3>
<span>photos/small-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
</li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
<script type="text/javascript" src="compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}

</script>

</td>

<td><img src="images/shell_images/r.png" width="52" height="265" /></td>
</tr>
<tr>
<td><img src="images/shell_images/l2.png" width="48" height="264" /></td>


<td><img src="images/shell_images/r2.png" width="52" height="264" /></td>
</tr>
<tr>
<td><img src="images/shell_images/bl.png" width="48" height="147" /></td>
<td><img src="images/shell_images/bl2.png" width="184" height="147" /></td>
<td><img src="images/shell_images/bm.png" width="184" height="147" /></td>
<td><img src="images/shell_images/br2.png" width="184" height="147" /></td>
<td><img src="images/shell_images/br.png" width="52" height="147" /></td>
</tr>
</table>
<p>&nbsp;</p>
</center>
</div>


</body>
</html>
jscheuer1
07-30-2011, 05:25 PM
The two scripts are incompatible. You could probably use SlimBox:

http://www.digitalia.be/software/slimbox2

but you would have to set it up in noConflict mode and replace its native init.

You could do both by replacing it's native init (its 'AUTOLOAD CODE BLOCK' inside the slimbox2.js file) with:


// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function($){
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
$('*[href][rel^=lightbox]').live('click', function(e){
var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
if(rel === 'lightbox'){
$.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
} else {
$('*[href][rel="' + rel + '"]').each(function(){
if($.inArray(this.href, hrefs) < 0){
if(t.href === this.href){index = hrefs.length;}
hrefs.push(this.href);
links.push([this.href, this.getAttribute('rev') || '']);
}
});
$.slimbox(links, index, {loop: true /* , Aditional Options */ });
}
e.preventDefault();
});
}
})(jQuery.noConflict()); // No Conflict Version

Get rid of the lightbox files, install the slimbox files. Make sure they come before the TINY slideshow files.
remiales
10-17-2011, 03:26 PM
Hello!

I have done what you said, but still no open in lightbox. May you provide to me the steeps that I should follow in order to make the TINY slideshow open images with lightbox?

Thank you in advance
jscheuer1
10-17-2011, 03:53 PM
I have done what you said, but still no open in lightbox. May you provide to me the steeps that I should follow in order to make the TINY slideshow open images with lightbox?

Please post a link to a page on your site that contains the problematic code so we can check it out.
remiales
10-17-2011, 08:23 PM
Thank you for replay

here is the link http://www.kdabra.com/TinySlideshow/
jscheuer1
10-17-2011, 11:00 PM
There need to be slimbox links on the page, ex:


<a href="larger_image.jpg" rel="lightbox" rev="Optional Caption"><img
src="smaller_image.jpg" alt=""></a>
remiales
10-17-2011, 11:26 PM
Jonh!

I just add those links...now is open a new window


Thank you for help me
remiales
10-18-2011, 01:21 AM
You know, if i add the img and the link OUTSIDE of <li>, than the lightbox works.
jscheuer1
10-18-2011, 02:48 AM
That's all the first person or persons in this thread wanted. But you're right, the TinySlideshow slices and dices the DOM and turns the link into an onclick event for a division. This renders it in a form that's unusable by slimbox.

But we can fix that by adding this script:


<script type="text/javascript">
;(function($){
var re = [/"([^"]+)"/, /^lightbox/];
$('#imglink').live('mousedown', function(){
if (this.onclick){
$(this).data('href', re[0].exec(this.onclick));
this.onclick = null;
}
}).live('click', function(){
var href = $(this).data('href'), executeraw = true;
if(href){
$('#slideshow a').each(function(){
if(this.href === href[1] && re[1].test(this.rel)){
$(this).click();
executeraw = false;
return false;
}
});
if(executeraw){
window.location.href = href[1];
}
}
});
})(jQuery);
</script>

Put it right after the external script tag for slimbox.js.

Now, while I was messing with this I discovered that the TinySlideshow doesn't show the hover link in IE. That's even without slimbox or jQuery. It's evident even on the TinySlideshow demo page:

http://sandbox.scriptiny.com/javascript-slideshow/

That can be fixed by modifying this line in the TinySlideshow style.css file as shown (add the highlighted):


#imglink.linkhover {background:url( . . .

And by adding this to the head of the page:


<!--[if IE]>
<style type="text/css">
#imglink {
background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
}
</style>
<![endif]-->

These changes/additions will not affect other browsers, which will still show the hover link correctly as they always have.
remiales
10-18-2011, 01:02 PM
Thank you very much...now it is working...