title: how to use jquery image gallery inside a lightbox/modal?
body: <p>I would like to ask some help with a jquery light box/image gallery I’m having.</p>
  
  <p>The site I’m working on talks about real estate, on mouseover an overlay appears offering a “more info” tour. when clicked a light box is supposed to appear containing more information about the property.</p>
  
  <p>The light box is also supposed to contain a slideshow of additional images.</p>
  
  <p>The mouseover overlay and light box work fine, but I can’t get the image slider to work within the light box.
  I see all the contents of the slider, sample images that should be hidden are not, and all the functionality is missing.</p>
  
  <p>These are the two plugins I’m using:</p>
  
  <p><a href="https://github.com/richardscarrott/jquery-modal" rel="nofollow">https://github.com/richardscarrott/jquery-modal</a></p>
  
  <p><a href="http://i-like-robots.github.com/jQuery-Slideshow/" rel="nofollow">http://i-like-robots.github.com/jQuery-Slideshow/</a></p>
  
  <p>I'm using jquery 1.8.3 as my base and both plugins work with that base.</p>
  
  <p>Here is a fiddle:   <a href="http://jsfiddle.net/stephanief0042/cwKKY/6/" rel="nofollow">http://jsfiddle.net/stephanief0042/cwKKY/6/</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Image gallery in lightbox&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="modal.css" media="all" /&gt;
  &lt;link rel="stylesheet" href="slideshow.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="outerspaces.css"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.rs.modal.js"&gt;&lt;/script&gt;
  &lt;script src="outerspaces.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="hover firstdiv"&gt;Hover here
  &lt;div class="overlay-test"&gt;overlay test&lt;/div&gt;
  &lt;!-- First overlay--&gt;
  &lt;div class="overlay" style="visibility:hidden"&gt;
  &lt;a href="#host-space" class="modal-toggle-1"&gt;&lt;img src="images/request-a-tour-overlay.png" /&gt;&lt;/a&gt;
  &lt;/div&gt;​
  &lt;div class="host-space-content" style="display: none;"&gt;
  &lt;div id="host-space" class="host-space"&gt;
  &lt;div id="host-image-gallery"&gt;
  &lt;div class="hostname"&gt;Host Name&lt;/div&gt;
  &lt;div class="hostaddress"&gt;Host Address&lt;/div&gt;
  &lt;!-- Image gallery space --&gt;
  &lt;div class="slideshow" data-transition="crossfade" data-loop="true" data-skip="false"&gt;
  &lt;ul class="carousel"&gt;
  &lt;li class="slide"&gt;&lt;img src="http://placebox.es/440/200/d97ef2/f5f5f5" alt="" width="440"                   height="200" /&gt;&lt;/li&gt;
  &lt;li class="slide"&gt;&lt;img src="http://placebox.es/440/200/50ac3d/f5f5f5" alt="" width="440" height="200" /&gt;&lt;/li&gt;
  &lt;li class="slide"&gt;&lt;img src="http://placebox.es/440/200/0a77bb/f5f5f5" alt="" width="440" height="200" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- END image gallery space --&gt;
  &lt;div&gt;Host short description&lt;/div&gt;
  &lt;div&gt;Host indstry/vibe info&lt;/div&gt;
  &lt;div&gt;Host Website link&lt;/div&gt;
  &lt;!-- END host-space --&gt;&lt;/div&gt;
  &lt;div id="host-info-area"&gt;
  &lt;div&gt;Host Info area&lt;/div&gt;
  &lt;!-- END host-space --&gt;&lt;/div&gt;
  &lt;!-- END host-space-content --&gt;&lt;/div&gt;
  &lt;!-- END CONTAINING DIV --&gt;&lt;/div&gt;
  &lt;script src="slideshow.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function()
  {
  // Create slideshow instances
  var $s = $('.slideshow').slides(),
  // Access an instance API
  api = $s.eq(0).data('slides');
  // Transition select
  $('select[name=transition]').on('change', function()
  {
  api.redraw( this.value );
  });
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  $('.modal-toggle-1').click(function (e) {
  e.preventDefault();
  $.modal.open($('#host-space').clone(), {
  maxHeight: 600,maxWidth: 874,fitViewport: true
  });
  });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My jquery skills are not strong and other than a couple small styling changes I’m using the default examples. </p>
  
  <p>Any help would be appreciated, if I need to provide more detail to my question please let me know.</p>
  
  <p>Thanks!</p>