Databases
StackOverflow2013
Postsdbo
POIntegrating fancybox into galleriffic
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIntegrating fancybox into galleriffic
    primarykey
    data
    text
    <p>I would like to integrate some of fancybox's features into galleriffic. Basically I want to have a gallery of images with their respective thumbnails using galleriffic. Besides the styles my approach looks very similar to: <a href="http://www.twospy.com/galleriffic/example-2.html" rel="nofollow">http://www.twospy.com/galleriffic/example-2.html</a> Additionally, I want to be able to zoom into the image being shown. For such prupose I am using fancybox. An example of its behaviour can be found here <a href="http://fancyapps.com/fancybox/demo/" rel="nofollow">http://fancyapps.com/fancybox/demo/</a> </p> <p>I have managed to make what I described above slightly modifying the galleriffic buildImage function leaving it as follows:</p> <pre><code>.append('&lt;span class="image-wrapper current"&gt;&lt;a class="advance-link fancybox" rel="group" href="'+imageData.image.src+'" title="'+imageData.title+'"&gt;&amp;nbsp;&lt;/a&gt;&lt;/span&gt;') </code></pre> <p>Now, galleriffic adds the fancybox class fancybox needs as well as the image source. This works wonderfully.</p> <p>At this point I find a problem I don't seem to find a neat solution for. Fancybox allows to navigate through a collection of images by clicking on the right/left side of each image to go to the next/previous image in the collection (as you may have noticed in the demo provided above). I would like to make use of this feature as well, so that users can navigate through the gallery by navigating through galleriffic's thumbnails, as well as through a zoomed version of the images using fancybox.</p> <p>The problem I find here is that galleriffic creates the a class="fancybox" only for the image whose thumbnail has been clicked. This makes that fancybox is only able to find one image of the gallery. I don't want to define the class fancybox to the 's that define the thumbs for galleriffic because i dont want the images to be zoomed when clicked on the thumbnail but on the main image.</p> <p>In a way, what i need is to generate all the 's with the fancybox class but hide all the not shown, instead of generating each time the one I need via galleriffic. This is the only solution I can come up with but it is not neat. I like how galleriffic deals with generating the main image each time the thumbnail is clicked.</p> <p>I am wondering if someone can come up with a nicer solution. For example, fancybox could be able to know which image comes next by searching in the next galleriffic thumbnail's .</p> <p>I have tried to make a working jsfiddle demo but there's too much code involved. Also there is no definite problem but a conclict of implementations. I think you can replicate my current situation easily. </p> <p>Thanks for the effort!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmezod
    1. USmezod
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload