i was wondering how can i create image slider like YouTube channel. when there is many video on a channel YouTube put them in a slider and we have back and forth button to see other video which doesn't show on the page and when we click on this back or forth button which are on different side of screen image start to move to left or right. two properties are important to me. 1. image slide from left to right or vise versa and 2. i can click on those image and go to another page.i mean image become clickable. i search image slider in Google but all i'v got was those image slider which we put under the banner for showcase. i don't know if the real name of this method is image slider. please give me a post or URL tutorial or even a YouTube video about create this kind of stuff. tank you very much
Yes, it's called an image slider.
Where do you want to use it? If you want to create your own, this question might help you: How to build simple jQuery image slider with sliding or opacity effect?
Have a look at this page for a multi-image-at-once slider implementation: http://bxslider.com/examples/carousel-demystified
Have a look at this website for a showcase of the different types of sliders available: http://www.jssor.com/
Related
I've got a little application that shows one photo in the middle of the page, some right/left buttons for changing the photo, and a flexslider at the bottom of the page having thumbnails of all available photos. Depending on the width of the browser, 4 to 10 thumbnails are visible at a time.
I want to synchronize the slider with the main photo. I've turned animation off. And when I click on something in the slider, the main photo updates. I've got this working.
But when I change which photo is shown using the right/left arrows, I want to update the slider so that the thumbnail for the main photo is shown, as in, move the slider right or left. I tried just manually changing (increment or decrement) the slider.animatingTo value, but that doesn't update the slider on the screen.
I've also tried, by modifying the jquery.flexslider.js file, putting one of the update methods onto the slider object (essentially making it public). But I'm not sure what the right function to call would be.
Any help would really be appreciated.
I found the solution:
slider.flexAnimate(slider.getTarget("prev"));
and
slider.flexAnimate(slider.getTarget("next"));
I would like to create a slider but my javascript and jQuery knowledge is not that great.
I looked at Flexslider (http://flexslider.woothemes.com/) but I am not able to customize it for the following specs:
no colour gaps between thumbnails
thumbnail timeline scrolls left to right and vice versa
when you click on a thumbnail it replaces the parent (larger) image.
If you could help me understand the code that I need to write, I would be very grateful.
Try cycle 2 plugin. You can customize it as per your need.
http://jquery.malsup.com/cycle2/demo/caro-pager.php
I'm working on a website and I'd like to add a photo gallery. The gallery should work as follows:
The gallery has a rectangle/box form. I have, let's say, 10 photos. 7 of them are displayed in a gallery, the rest is hidden. By clicking buttons "left" or "right" we can move photos in the given direction and so view a photo that was hidden (and hid a photo that was on the far left or right side). The gallery should be loop, so a button won't stop moving photos when it reaches the last photo, but start viewing photos from the beginning (starting with the very first one) instead. I know HTML and CSS, but, if I'm right, CSS itself is not enough to make such gallery. I think I need some Javascript code for this, but I don't know JS. I've searched on the net for JS gallery scripts, but none of them works and looks as I'd like them to work and look.
Try bxSlider. I think it offers exactly what you need.
I've got a image gallery where by the user clicks on a thumbnail, it then retrieves the image and displays it in a container. Now I've added 2 buttons to navigate between images, however I'm not sure how to make the rotation work.
Can someone have a look?
http://jsfiddle.net/calebo/QuXYV/
take a look at my blog, I guess this is exactly what u want.
http://mycodelove.wordpress.com/2011/09/18/simple-photo-gallery-from-img-in-li/
I am trying to get the same effect as this site (I don't think you can see it if you don't register). Here's the image that describes it
As you can see when I hover on the image, it shows this box and then when I hover on youtube it automatically plays the trailer of the movie. How the hell can I do this? This just seems to be pretty amazing to me. I am guessing that they are doing this on real time
The part where you hover an image, that plugin is called a ToolTip. You can basically load up any html in it as you wish. Take a look at qTip.
As for playing a youtube video on hover. This is using the youtube javascript API. You can start the video right after the tooltip pops up, etc. API here.
you would want to use qTip for this.
Hey! I baked something for you here demo.
also a similar demo here.