I am wondering how to replicated the same modal window components used on Lonely Planet: http://www.lonelyplanet.com/interest/family-travel/best-of-family-travel/content/travel-tips-and-articles/2550
So when you click on one of the listed thumbnails you will see the modal window with the arrows which on hover state displays the preview image. I am trying to recreate the same plugin with Zurb Foundation or plain JS, jquery which at the end will be implemented into Wordpress. I know this is not the platform to ask this kind of questions but yeah. I don't know where to start.
If you have any suggestions of plugins or whatsoever please let me know.
Thanks in advance!
If you want to create your own plugin using Zurb Foundation, you can get an idea from the following code.
http://codepen.io/shoaibik/pen/GZaOGV
$(function(){
$("#exampleModal2").foundation('open');
$('.nav').click(function(){
if($(this).hasClass('prev')){
if($(".reveal-overlay:visible").prev().find('.reveal').length){
$(".reveal-overlay:visible").prev().find('.reveal').foundation('open');
} else{
$(".reveal-overlay:last").find('.reveal').foundation('open');
}
}else{
if($(".reveal-overlay:visible").next().find('.reveal').length){
$(".reveal-overlay:visible").next().find('.reveal').foundation('open');
}else{
$(".reveal-overlay:first").find('.reveal').foundation('open');
}
}
});
});
If you want to use plugin you can use slick slider and customize it to your needs.
http://kenwheeler.github.io/slick/
Related
<https://codepen.io/samyakjain20/pen/dyMmaYj>
This is what I tried!, tried to integrate two slider designs mentioned below. The gesture animation which is there in the 1st link is not working in my slider.
https://codepen.io/codewunder/pen/Bnspb/
https://codepen.io/maheshambure21/pen/qZZrxy
I think the error is in JavaScript but I don't know how to solve. If you have seen something similar to this then also please mention it.
Just click in the cog icon on the JavaScript panel, and add the jQuery CDN link https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
This error is because the jQuery library is not found in your code.
This is a new question and I mentioned it in my previous one here just to save posting the code again.
I don't want to start over so I was wondering how I'd go about making the navbar collapse but in an animated way, the code I have works but the navbar still doesn't collapse when clicked off. Would this also be done with bootstrap?
Completely new to bootstrap animations and I can't find any libraries with good instructions or examples. Any links would be appreciated, as well as a fix to my header issue.
Thanks in advance.
Vist this link they have listed 9 libraries, when you click on the link of library it will redirect you to github and there in ReadMe they have given explanation related to the library.
I need a way how can I slide a whole site with a full-screen profile to the next profile with touch events in Javascript, hope you can help me thank you.
The Design is ready and I just need a function for and how to make the function works.
Please check this which is an example of Carousel. You have to use bootstrap framework though. Just import it in the head of your html. You don't need to implement any javascript with this.
I've been trying for weeks to build a navigation sidebar like these images:
I'm using twitter bootstrap, however, even though their getbootstrap.com/components has a very good looking navigation sidebar, there is no such component in their library and it is so much pain to build one. Therefore, I resorted to using jquery in my attempt to build one like the Tommy Hilfiger's global site.
Tommy Hilfiger's Global Site
However, I'm new with javascript and css... they are my weakpoints... especially if they are minified :( and I'm stuck at trying to make the arrow marker and have it move along (animating) and always pointing to the current section. I managed to animate the page scrolling though, and my WIP so far is here:
WIP - Twitter Bootstrap Navigation Sidebar
Is there any open source components (or preferably bootstrap ones) to achieve that section indicator animation?
I'm so confused with my scripts that are getting messier, so open source component is highly desireble, however, any input on how to achieve it (with script example please) will also be appreciated.. Thank you very much in advance!
Check out ScrollSpy, the component exist on bootstrap itself:
bootstrap scrollspy
extracted from:
https://stackoverflow.com/a/14366014/474330
So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works
can anyone provide me any ideas about how to import a facebook like box, in my site. I would it to seem like the one in the folowing site "http://www.babyspace.gr/". Does any of the existing javascript frameworks afford such a functionality?
Thank you in advance
It is simple Facebook social plugin called Like Box and you can get it here: http://developers.facebook.com/plugins?footer=1
You can install it on any webpage quite easily - If you follow the instructions on the page linked above.
About the slider - It can be achieved quite easily with jQuery. Put the Like Box on some div and use jQuery animate to show it by click.