Using slideshow like navigation with localscroll - javascript

How do you create the following?
On virtually every slideshow you have a previous and next arrow and a bunch of dot's indicating what "slide" you're viewing. I'd like to use this for an entire site. I'm using scrollTo-1.4.2 with localscroll-1.2.7, so it's a bunch of div's the user can scroll to.
I'd like to be able to have the dot's and back/next buttons to use like a menu. Does anyone know how to create this, or where I should start to create this?
Thanks!
(If you need me to post the html, js or css I'm using, tell me and I will)

Make a carousel. As always, I recommend using the jQuery cycle plug-in. It has lots of options to really customize what it can do.
Be sure your markup degrades nicely for non-JavaScript.
Every slide in your slideshow should have a unique and human-understandable id.
An example of something I've done: http://jquery.malsup.com/cycle/
Link the hash to the carousel. When the page loads, you grab the hash and tell cycle that you want to start on that page.
If you need some help with the details, comment on this post.
Update: http://jsfiddle.net/morrison/QhvCU/embedded/result/

Related

(JS) SPA-like website behavior with background videos

Forgive me if another thread like this exists - I couldn't find the answer to that specific problem.
I'll soon be developing the frontend for a vanilla JS AJAX loaded website, with SPA-like behavior similar to the home slider in this one:
- http://clapat.ro/themes/grenada-wordpress
The methodology I will probably utilize is loading the innerHTML of a container from the targeted sub-template, then pushing the state to the history - pretty standard approach to this, I believe.
Now, the slides containing image background are pretty obvious - all it should take is placing the same image in the target subpage hero section, then animating in on load. The problem might be with the video slides - how to make them continue playing seamlessly during and after the reload? Will such approach force them to start all over from the beginning, as soon as the target page is loaded and placed in the view?
I haven't tried it yet, I thought I'd ask in advance, in order not to get myself stuck up all the way into the incorrect approach :)
Thank You in advance,
Peter
Researching the reference templates for the 100th time, I think I came up with some kind of a solution myself:
if both the homepage and target page had structure like:
<body>
<main-container>
<slider-or-hero-container>
...
</slider...>
<content-container>
...
</content...>
</main-container>
</body>
Then, maybe I could replace the whole "main-container" on normal links, but replace only "content-container" clicking the links within the slider? The slider section would basically just stay, and the script would simply modify its appearance (disabling arrows and slide change, perform the transition animations etc)...
If you had any suggestions at this point, I'll really appreciate that :) Otherwise, I will post an update when I'm done coding it - if it works, it may be helpful for someone in the future :)

how to build a not preload slide show by javascript?

i would like to make a simple slide show like this:
http://www.businessinsider.com/useful-apps-2013-8#quip-is-a-brand-new-mobile-word-processing-app-quip-is-made-by-facebooks-former-cto-the-app-makes-it-easy-to-create-documents-on-the-go-but-it-still-works-on-your-desktop-too-2
i am new to javascript, may i ask is there any example to build a slide show like above?
it seems the picture will only be loaded from the server side when the user click the previous/next button.
and is there any way to speed us the script as well?
many thanks.
The two simplest sliders/gallery plugins are fancybox and flexislider. Their are plenty of tutorials and help online to use these.

Building a "single page" site with animation between pages

I would love to know what is used to have an effect such as this website template: http://www.templatemonster.com/demo/43491.html
I would like to have a single menu and background while once I click on the menu link it triggers the new page to slide into view without being redirected to a new page causing the browser to reload the new page, etc. Something smooth and nice.
I'm not looking for code (other than the functions to use (if JQuery)) and what effects should I be looking for to make this possible?
Just point me in the right direction :)
There are many ways to achieve what you wish, but this is my suggestion on how to go about it conceptually:
Animate the content by animating the position of your content container, that should give a nice smooth feeling to your page. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.
Get your content using an AJAX request. You can use the href attribute that you put in your link in order to fetch the correct content. Then bind an event to that <a> element with a the .on() method. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content.
These are the two essential steps to achieve what you are looking for. If you want to fine tune your site a bit more, try to think about those things as well:
Make your website look more responsive by the cautious use of loading .gifs.
Don't double serve content: check whether the user is clicking to the link of the currently displaying page and don't fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.
Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will also look much more advanced.
now there can be tons of ways .. the easy way (but it's not much of a maintainable way )
is to all your website content in one page and wrap every section that you consider a page in a div like so
<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us page goes here </div>
etc...
and with jquery hide them all except the home page
$(function(){
$('.contact-us-page').hide();
$('.other-page').hide();
})
and when the user clicks on the link to other page let's say the contact us page you will hide the parent and slide the contact us page instead
$('.contact-us-link').click(function(){
$('.home-page').hide(1000);
$('.contact-us-page').show(1000);
})
and thats it :)
the down fall of this is that there will be no routing ..
so to solve this you have to use something like backbone.js
which takes a while to know it well ...
this is just a quick idea on how this works ..

JQuery pop up/ alert needed

I have a list of elements that need to have a corresponding pop up for each element. This is not a pop up where the background is blacked. This is more like a javascript alert although I need to create my own styled button within the pop up with our own bespoke event assigned to it. I need each pop to position itself appropriately next to the relevant item within the UI.
Whats the best way to do this? Are there any examples please? I only want the pop up to show when the visitor triggers an event.
Many thanks,
I suggest you to use Colorbox for pop-up systems. Fırst of all; it is easy to learn and use.
And most importantly: Colorbox won't create conflicts with your other plugins (sometimes fancybox does that).
Some Features:
Supports photos, grouping, slideshow, ajax, inline, and iframed
content.
Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
Appearance is controlled through CSS so it can be restyled.
You can easily do this without using jQuery Plugins.
I put together a little example.
What about http://jqueryui.com/demos/dialog/#modal-confirmation
or http://jqueryui.com/demos/dialog/#modal-message

Create simple website with left menu and right content

I hope to create a website simple website with:
Left menu with items to click
When each item clicked, right menu is changed with new content. The content is always: title, picture 1, text description, picture 2. Same format for all left menu items.
Ideally I want the page to be just 1 page, without frame or separate .html files. If the item is clicked, jQuery will change the photos on right side with photo url in some array.
Is there an easy way to create this with existing templates somewhere? Either from internet, Wordpress (without database), Dreamweaver, or Dreamweaver plug-in... I just want to avoid having to do from scratch.
If you imagine this right, it could be just like a help page from MSDN, IBM or Apple Developer website. Just don't want to do each html separately due to potential change in format later.
Thanks.
Basically, each "page" should be placed in a div that is hidden with css. jQuery can show and hide the divs with a variety of effects.
I have created a simple example for you here:
http://jsfiddle.net/RLdmZ/2/
Whilst the exact specifications you require may not exist already, there are other options in jQuery.
Notably, a search for a 'jQuery gallery' returns many options varying in design, implementation and complexity.
Have a look for yourself!
I hope this answer solves your question.
It's my first answer, so go easy! :]

Categories