how to build a not preload slide show by javascript? - 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.

Related

simple jquery lightbox for displaying images

I cant believe I am asking this - but I spend the last TWO HOURS looking for a simple jquery lightbox to give to my students to learn how to implement...
What I need is something that is very simple:
I have a bunch of images and when I click on them I need a lightbox to open with a (different) image that I can specify...I just cant find anything that does simply that. Of course the lightbox will need to behave like a standard lightbox (X- close button, scale to size of image, have a line of caption or so)
something like:
$('.this-image').click(function(){
awesomelightbox.open('new url');
})
Most of the lightboxes I checked open either the same image that was clicked, or has a gazillion options that my students wont understand.
I tried:
- LightBox
- ColorBox
- FancyBox
- VisualLightbox
- Featherlight
Nothing suits my requirement :(
Does anyone know any simple lightbox that does what I mentioned? I would greatly appreciated any pointers.
Actually, using Fancybox you can do it. I went to their "How To" and they have an example. Look at the last bit of code on the page. If you are only trying to display 2 different images you can use their method. Notice how they have a small.jpg and a big.jpg, so it essence they are using 2 different images. This way they can use one image for thumbnail and a larger one for the actual fancy box. Is this what you are looking for?
EDIT: Or if you would like to use my plugin you are welcome to source it from my site. Here is an example, check sourcecode for usage.
http://tylerteaching.com/coolbox/
I'd recommend using Maginific (http://dimsemenov.com/plugins/magnific-popup/), or Pretty Photo (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/)

How to create a link with CLASS in javascript?

This is my first question here in StackOverflow, but I have used the site many times, and you always helped me with your answers. Now its time to share my doubt, because I could not find a similar one here.
I have a flash banner rotator in my website, that uses a XML to configure the images and links that will rotate. I don't have acess to the source, because it is a commercial version.
I can not use jQuery to rotate the images, because I have a drop down menu and it always fall behind the banner. I tried z-index but it does not work on IE.
One of the images is to show a video, so, when someone click on it, I want a lightbox to open and play the video (I will use Sublimevideo.com for this)
The XML now is like this:
<slideshow>
<photo image="path/image.jpg" url="link" target="_blank"></photo>
</slideshow>
I need to add a CLASS to this link, because I want it to be opened in a lightbox!!!
So I was wondering to do something like this:
window.location.href='link class="lightbox"';
But this is not a option, it did not worked!
So how can I add a CLASS in the link at the xml file?
I was wondering using javascript, but if you have any other option, it will be GREAT!
Thanks a lot in advance and sorry for my English, I'm from Brazil =P
You could do it with an horrendous jQuery hack:
$('*[href*="path/image.jpg"]')​.addClass('lightbox');​​​​​​​​​​
Of course, if you know what the HTML will look like you could use a far more specific / less ugly selector.
A much better solution would be to add the class on the server, which sounds like it should be possible.

Jquery Plugin qTip2 is this what is use on Hypem.com?

If you go to this website you will notice http://craigsworks.com/projects/qtip2/ qTip2 Jquery Plug (the green template theme) .. It is a project called qTip2 Jquery Plugin. It looks similar to http://hypem.com/ Jquery.
Is this what they used for audio player located on top. It looks like they used this Jquery and and implemented JavaScript into qTip2. I was looking to do something similar I noticed that there is 22 JavaScript, 2 CSS, 2 PHP and HTML. One reason to successfully code this, is because trying to achieve a player that hovers above and users can browse around the site and their music is not interrupted. I seen it done with I-frames but that is not going to be acceptable. If you have an Ajax example that would be terrific. I can't find any useful resources relating to an Ajax MP3 player that could be on the top panel. Do you think this will work , am I on the right track?
If you could please provide source code or any resources I would greatly appreciate. Thank you
If you can use html5 https://github.com/goldfire/howler.js that can then have your player in fixed position block element.

Using slideshow like navigation with localscroll

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/

How do I make menus like these?

So I'm looking at slickdeals.net and amazon.com, and I found something very intriguing. It's basic for most of you guys out there, but it's new to me. For slickdeals.net, when you click login, a login box pops up like so. Also for Amazon.com, when you hover over the left navigational menus, a new menu pops up! I think it's JavaScript, but how does this work? How can I do something like that?
Update:
Thanks for the answers! One more question about Amazon's website. I've been looking at it with firebug. So how are they making their sub menu appear? I was expecting the mouseover to change the sub menu from display:none; to display: block; but this isn't the case. What is it change on the mouseover to make it appear?
Looks like a combination of CSS and Javascript. Look into JQuery and JQuery UI. It's easy to use and has things that make sites like theses easier to develop.
Look into the UI stuff for the menus and drop-downs and things like that. That JQuery UI is really cool and lets you make really dynamic web pages. They have examples on the JQuery UI site that you can look at.
You can view source to find these answers for yourself. It appears slickdeals.net is using jQuery for its javascript effects.
http://jquery.com/

Categories