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.
Related
I'm having trouble getting Slick.js and the Foundation clearing lightbox to play nicely together. The way I have my site set up is that there are three 'pages', but each page is a Slick.js slide, so the site is really only one actual webpage.
In my photography 'slide', I have a basic lightbox setup with Foundation. However, I cannot get the lightbox to open properly when Slick.js is enabled. It works just fine when Slick.js is disabled.
You can see a live example here: www.kcfeatures.com/services.html
Here's a working live example (slick.js is disabled): www.kcfeatures.com/services1.html
For the life of me, I cannot figure out how to get it to work. My guess is that it has to do with the slick-track? Since the slick-track div is so wide it might be messing with how the lightbox is displayed. Lightbox also normally starts at the very top of the viewport, but with slick.js enabled it starts underneath the topbar, where the slider starts.
Any help or guidance would be greatly appreciated!
Even I tried to implement something similar but slick didn't allow my clearing lightbox to work.
Suggestions/Workarounds
Try Foundation 5 Reveal modal.
Have separate divisions for every thumbnail image that would contain the large version of the image. Tweak your code to trigger the reveal modal for every thumbnail displaying the larger version. However this will not allow you to move through other images as clearing lightbox would do. (You can implement a slick slider inside your reveal modal div to make that happen.)
How about using Foundation Tabs ?
I saw your website, except for the slide in effect of photography, videography and web design divs there is no need specific need for slick usage. I believe you can use Foundation Tabs and implement the same (Using clearing lightbox will be super easy now). If you want animation for your tabs you can refer Jquery Slide animations and implement the same for your tabs. You can also refer Foundation Tabs animation using this.
How can a website shift effect be done like this website? http://showmyshift.com/# When you click a link, the content flies by and shifts.
I believe they are either using CSS3 or Jquery to do this, how can it be done?
EDIT: I also have no idea what this effect is called, nor have I seen it before. I'm hoping someone more experienced has seen this effect before and knows what it is.
it's just a slider, simply look for a slider that allows linking to specific slides, like Unslider (tricky if you don't know what are you doing) or Owl Carousel or the millions out there, and simply link each menu item to a slide. You can also use CSS, but for what you say about your knowledge, it's not recommended since it's way more difficult
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?
I developed article rotator where 5 articles with images rotate automatically and user can focus one (and stop rotating) by mouseover. Click will open the article.
The article rotator is here: http://antizena.df.sk/ and it is just devel version.
How to name it? What is the best name for this feature?
I would call it Carousel
They are usually referred to as Carousels
Call it anything you want. But it fits into the category of carousels or images sliders. Here is a plugin similar to yours called an image rotator.
Article stack? Article pile? AutoSkip-Stack?
A carousel to me is something that spins and where you can see more than one element at a time. Similar to the coverflow on an iPod.
I am currently developing a site and have a need for a javascript-based carousel/slider hybrid on the home page that fades between 3 or 4 different images automatically, giving the user the chance to click on one and go to another page on the site. I also need the different slides to have some sort of navigation, denoted either by names for each slide (like in the Coda slider effect) or by symbols (such as dots for each slide), to allow users to review their options before clicking on the slide to visit the particular highlighted section.
I have seen this done in many ways with flash , but the only javascript approach I have seen that meets my needs is the one used by Apple on the new iLife page (link). Does anyone have any ideas what they are using or if there is a project that is similar to their implementation?
Thanks in advance.
Unless I'm missing something, the navigation on iLife looks like a photo gallery where the large photo links to the destination. I've used the jQuery Galleria for photo galleries because the animation effects are superb. Also the forum provides helpful community-based support.
If you wanted a carousel-style animation with the images sliding left and right, might try the jQuery Carousel library. I have not used it myself though so cannot comment on its ease-of-use or quality.
jQuery animate or jCarousel
The YUI Carousel Control would be another starting point to have a look at. (Note as of writing it is currently in beta.)
Hey I am not sure how helpful this will be but check out this slider. It is super simple and has the navigation thumbnails i think you are looking for
http://codetutorial.caroshaw.com/jquery_image_slider.php