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/
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 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/
You can see in my attached image, one of the buttons/icons has the same photo as the large picture, if I hover over the other buttons/icons the large picture should also change. This seems redundant and indeed this is not what I intend to do but shows the effect I'm trying to accomplish. The only thing I have to go on is the mouseover effect for hovering over an image which changes but how do you have the secondary image show up elsewhere other than the current picture itself?
-- update --
I want to have a photo preview where if you hover over multiple divs or images, a larger one changes to show a preview.
Is that css or javascript?
Thank you
I want a image gallery similar to the design as show in fiddle example. It has been customized to look more what we are looking for but i have two issue with this right now
Popup is not aligned in the middle of the page. i tried changing few properties but that didnt work
How can i add working Next Prev button functionality to this gallery so that users dont have to click each time to view the next phone. I had looked at other galleries but each had one of the other problem when i tried to customize them.
I had tried to customize this gallery but i had same it i need to show image in a fixed box 600x300 pixel with image on left & text on right of the image.
I also tried to modify Magnific popup almost change the script to work but this also had an issue as it always start the galley from first image itself irrespective of which image users click on http://codepen.io/anon/pen/LvFxH
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.