Forums

edonian

Can anyone tell me if this is possible?

I want to do a slideshow like this (with the "back" and "next" feature), but let's say you have the slideshow designed inside a horizontal box, but the images are both horizontal and vertical. Since the vertical images will look a lot smaller compared to the horizontal, I want the viewer to have the option of enlarging that vertical image, and that's where the lightbox come in. But the way the code is designed for the lightbox, I'm not sure how to combine them.

The lightbox effect: Here.

Well, here are some screen caps to kind of explain what I'm saying:
Horizontal
Vertical

You can't fully appreciate the vertical, it appears much smaller inside the box. If I could add the cool lightbox effect, the viewer could simply click that image and it will pop out much larger.

The SLIDESHOW CODES ( A Javascript file)

  var num=1
  img1 = new Image ()
  img1.src = "IMAGE LINK HERE"
  img2 = new Image ()
  img2.src = "IMAGE LINK HERE"
  img3 = new Image ()
  img3.src = "IMAGE LINK HERE"  

text1 = "Text for Picture One"
text2 = "Text for Picture Two"
text3 = "Text for Picture Three"
text4 = "Text for Picture Four"


 function slideshowUp()
  {
   num=num+1
   if (num==5)
    {num=1}
 document.mypic.src=eval("img"+num+".src")
 document.joe.burns.value=eval("text"+num)
   }


 function slideshowBack()
  {
   num=num-1
   if (num==0)
    {num=4}
 document.mypic.src=eval("img"+num+".src")
 document.joe.burns.value=eval("text"+num)
   }

The LIGHTBOX CODES

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<link href="http://casildasdesigns.webs.com/lightbox.css&quot; rel="stylesheet" />
</head>
<body>
<a href="http://img.photobucket.com/albums/v417/lil_smartgurl/tabby_kittens.jpg&quot; rel="lightbox[photos]" title="Click on the right side of the image to move forward."><img src="http://img.photobucket.com/albums/v417/lil_smartgurl/tabby_kittens.jpg&quot; width="300" height="225" border="0"  alt="test" /></a>
<noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script src="http://casildasdesigns.webs.com/jquery-1.7.2.min.js"></script&gt;
<script src="http://casildasdesigns.webs.com/jquery-ui-1.8.18.custom.min.js"></script&gt;
<script src="http://casildasdesigns.webs.com/jquery.smooth-scroll.min.js"></script&gt;
<script src="http://casildasdesigns.webs.com/lightbox.js"></script&gt;
<script>
  jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });

      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })
  });

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Is this possible, and can someone help me?

treehouse : what would you like to learn today?

Forums

Using using Lightbox inside a manual slideshow?