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: http://www.twospy.com/galleriffic/example-2.html
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 http://fancyapps.com/fancybox/demo/
I have managed to make what I described above slightly modifying the galleriffic buildImage function leaving it as follows:
.append('<span class="image-wrapper current"><a class="advance-link fancybox" rel="group" href="'+imageData.image.src+'" title="'+imageData.title+'"> </a></span>')
Now, galleriffic adds the fancybox class fancybox needs as well as the image source. This works wonderfully.
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.
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.
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.
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 .
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.
Thanks for the effort!
I tried your method above, editing the BuildImage function as you did. For me, it successfully links to the image, but does not load in FancyBox.
I have this code in the main file:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
You were successful combining the two, correct?
Related
My main layout is done trough fullpage.js and I've spent hours of making my page work the way i want it to. I've found photoswipe as a best solution for a gallery that will work with array of photos but the problem i get is that these 2 apparently don't work quite well together, atleast in my case. So the thing is, when you click on a img you see URL changing but the gallery doesn't show up. Only when i refresh the page gallery pops up but my fixed navigation and audio controls are on top of it. Is there any kind of solution to this problem or atleast a gallery that works with fullPage.js
Thanks
link to my current project
Read the fullpage.js FAQs
Particulary the question named "My other plugins don't work when using fullPage.js"
Short answer: initialize them in the afterRender callback of fullPage.js.
I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.
I would like to display an infographic on my page via a pop out like the facebook photo viewer, rather than just have a popup window be created with the image in it. I just like the UI of a pop out versus a pop up (no window management).
Is there a jQuery/javascript library that accomplishes the pop out functionality?
I'm trying to emulare visual.ly that loads the infographic in a pop out once you click the preview image.
Thanks
There are a lot of them. Search Google for "jQuery Lightbox" and at least one of them should match your needs.
For jQuery, try fancybox, a lightbox alternative.
There is also this page which compares different alternatives.
Yoxvew is a pretty good one. The downside to it is as far as I know it does not allow for scrolling, so you can't use larger images. There are a ton of these plugins around though. If none of them fit your needs it isn't too hard to make your own, or you can modify an existing library.
The page you link to use Colorbox.js to view photos.
This can be done simply with two <div> tags as well. One, which blankets the whole page with some semi transparent color or image and has a z-index larger than the whole page. Two, which has a z-index larger than one, is spaced relevantly, and contains whatever you want to show. Rolling your own isn't always desirable, as there are plenty of pre-written alternatives pointed out such as fancybox, lightbox, etc., but sometimes it is nice to know your options.
I have installed "Easy Nivo Slider" plugin for WordPress in order to show a slideshow in the heading of the site I'm working on and it seems that the plugin generates things like thumbnail navigation and etc inside the IMG tag with javascript. I have never seen this method before and all the changes (margins, paddings) have no effect even close to what I'd like to get. Basically, what I want is to have a slider with a title and description place and thumbnail navigation (whereas the thumbnail is not the smaller image of it, but another one, custom one, defined in a post's custom fields (I think I can do that myself). All I need is to be able to use CSS however I want it to, because right now the only function that actually responded was the font-size.
You can see the half-done site live at http://work.codera.in/re to get a look at the code and to get a glimpse of how I want to be able to modify it in the end result is here: https://minus.com/lbyerG4OncvwdZ
Why don't you try http://wordpress.org/extend/plugins/simple-nivo-slider/ or http://wordpress.org/extend/plugins/wp-nivo-slider/ . From what i can see here wordpress.org/extend/plugins/easy-nivo-slider/ easy nivo plugin appears to be broken.
I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image.
plz guide me with the code of how to do it using javascript or using CSS
I need some thing as in this website : link text
Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?
Or a pure CSS implementation, doesn't work on IE6 though.
CSS Light Box
question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size?
do u want it gradually maximize or instantly become large?
For 1st case, just do:
function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
} // just do the reverse for mouseOut event.
for 2nd case, if it enlarge gradually, look at jQuery.
if not, just change the element size.
jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.
Try this site:
http://flowplayer.org/tools/index.html
Take a look at the demos pages; excellent ideas for what you're looking for.