Results 1 to 10 of 10

Thread: Lightbox2, image opens in new window!

  1. #1
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox2, image opens in new window!

    1) Script Title: Lightbox2 inside TinySlideshow v1

    2) http://www.dynamicdrive.com/dynamici...box2/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!

    ______________________________________





    Code:
    <!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>
    Last edited by jscheuer1; 07-30-2011 at 04:06 AM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    // 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.
    Last edited by jscheuer1; 07-30-2011 at 05:35 PM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post TINY slideshow open images with lightbox?

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by remiales View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post TINY slideshow open images with lightbox?

    Thank you for replay

    here is the link http://www.kdabra.com/TinySlideshow/

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    There need to be slimbox links on the page, ex:

    Code:
    <a href="larger_image.jpg" rel="lightbox" rev="Optional Caption"><img 
    src="smaller_image.jpg" alt=""></a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Oct 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post TINY slideshow open images with lightbox?

    Jonh!

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


    Thank you for help me

  8. #8
    Join Date
    Oct 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post TINY slideshow open images with lightbox?

    You know, if i add the img and the link OUTSIDE of <li>, than the lightbox works.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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):

    Code:
    #imglink.linkhover {background:url( . . .
    And by adding this to the head of the page:

    Code:
    <!--[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.
    Last edited by jscheuer1; 10-18-2011 at 07:11 AM. Reason: code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    remiales (10-18-2011)

  11. #10
    Join Date
    Oct 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much...now it is working...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •