StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POhow to use jquery image gallery inside a lightbox/modal?
primarykey
Id
15323081
data
AcceptedAnswerId
15344255
AnswerCount
2
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-03-10T14:02:28.763
FavoriteCount
0
LastActivityDate
2013-03-11T16:58:47.090
LastEditDate
2013-03-11T15:55:36.287
LastEditorUserId
914241
OwnerUserId
914241
ParentId
0
PostTypeId
1
Score
0
ViewCount
1944
LastEditorDisplayName
text
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><!doctype html> <html> <head> <meta charset="UTF-8"> <title>Image gallery in lightbox</title> <link rel="stylesheet" type="text/css" href="modal.css" media="all" /> <link rel="stylesheet" href="slideshow.css" /> <link rel="stylesheet" type="text/css" href="outerspaces.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.rs.modal.js"></script> <script src="outerspaces.js" type="text/javascript"></script> </head> <body> <div class="hover firstdiv">Hover here <div class="overlay-test">overlay test</div>  <div class="overlay" style="visibility:hidden"> <a href="#host-space" class="modal-toggle-1"><img src="images/request-a-tour-overlay.png" /></a> </div> <div class="host-space-content" style="display: none;"> <div id="host-space" class="host-space"> <div id="host-image-gallery"> <div class="hostname">Host Name</div> <div class="hostaddress">Host Address</div>  <div class="slideshow" data-transition="crossfade" data-loop="true" data-skip="false"> <ul class="carousel"> <li class="slide"><img src="http://placebox.es/440/200/d97ef2/f5f5f5" alt="" width="440" height="200" /></li> <li class="slide"><img src="http://placebox.es/440/200/50ac3d/f5f5f5" alt="" width="440" height="200" /></li> <li class="slide"><img src="http://placebox.es/440/200/0a77bb/f5f5f5" alt="" width="440" height="200" /></li> </ul> </div>  <div>Host short description</div> <div>Host indstry/vibe info</div> <div>Host Website link</div> </div> <div id="host-info-area"> <div>Host Info area</div> </div> </div> </div> <script src="slideshow.js"></script> <script> $(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 ); }); }); </script> <script type="text/javascript"> $(document).ready(function() { $('.modal-toggle-1').click(function (e) { e.preventDefault(); $.modal.open($('#host-space').clone(), { maxHeight: 600,maxWidth: 874,fitViewport: true }); }); }); </script> </body> </html> </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>
Tags
<jquery>
Title
how to use jquery image gallery inside a lightbox/modal?
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USStephanieF
UserOwnerUserId
1. USStephanieF
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.