I am developing gallery for promotions. I am showing images thumbnail, And onclick image becomes fullscreen. Now i want to swipe this image to show next fullscreen. I have swiped already by using location. But it shows next image directly without any swiping /visual effect /transition. Please help me.
Are you trying to implement a carousel? While The way I'd go about doing this would be to pack the previous, current, and next image into a horizontal scroller (containg only these three child images). Set scroller snapping to true. Set up a listener, which will switch the images in the scroller.
For example, given nine images, and assuming we start by looking at the fifth images, the scroller will look like this:
1 2 3 4[5]6 7 8 9
If the user swipes left, the scroller will snap to image 6. Ideally, we have this model:
1 2 3 4 5[6]7 8 9
However, it is not always practical to load all images into memory at the same time. In this case, the scroller is populated like this:
4[5]6
When the user scrolls to view image 6, we load a new image after six (if available), and then remove image 4. The scroller now looks like this:
5[6]7
This should provide basic carousel behavior. The listener can simply not load the next image when the user reaches the ends of the image list, and the scroller will prohibit scrolling out of bounds.
Related
With Fullpage.js i would like to only use Scrolling down to navigate to next page which is horizontally. On one Page I would like to go down a few slides, navigate vertically. After these are finished I would like to go to next slide which is horizontally again.
I got it working when my Slide which is going to scroll vertically is the last slide. But cannot get it to work when it's in the middle of the slides.
I made a picture to show what i mean:
Your approach is not the right one.
The image should look like this instead:
That is, 3 vertical sections.
The fist and last sections with with 2 horizontal slides each.
This way you will only need to make use of the fullPage.js extension called Scroll Horizontally and you'll have exactly what you want.
Scroll down from 1 will lead to 2.
Scroll down from 2 will lead to 3.
Scroll down from 3 will lead to 4.
Scroll down from 4 will lead to 5.
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'm attempting to make a webpage using fullpage.js, and have a very large background image. What I'd like to do is make it so that each time the user scrolls down, it also scrolls the background image down. Essentially, if the background image on section one starts at 0,0 and the screen is 750px tall, I'd like to make section two start at 0,750 on the background image.
Is there a way to do this that doesn't involve manually splitting the background image into a bunch of different images and assigning image one (from 0,0) to section one and image two (from 0,750) to section two, etc?
You can use the callbacks fullpage.js provides such as afterLoad or onLeave or even the class added to the body element with the form of "fp-viewing-1-2`.
Check out this video tutorial I created with a similar topic. Just apply the same principle.
I am using the JSSOR slider to show 4 items like a gallery (as in the http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html example). Only difference is that I use $Lanes: 1 and $Cols: 3.
The idea is to show 1 item in the main area and 3 on the thumbnails area. It all works perfectly well.
However, I want these 3 "thumbnails" to be all the remaining except the one being shown in the main area. To do that, I set a value in $Align (for example, 100) but from a certain value on, the thumbnails stop moving bottom to up and start moving up to bottom. How do I keep the "direction" in which the thumbnails move? The indexes are all correct and the click takes the slider to the correct position but I really didnt want the thumbnails to move differently just by using the $Align.
I am trying to create a banner for the top of page, but haven't found any code yet that combines all of what I need. I have included an illustration of what I'm trying to do.
A) I have 4 buttons (each an image file), two to either side default image in the center. This is the main/inactive state.
All of the buttons would have similar animation when hovered over. For the sake of this question, I only illustrated two of the buttons.
B) If you hover over Box 1 (top left), the button would change and text and lines would slide out from left to right. Also, the center image would change. And, to make things extra challenging, the left button and center image would link to Page 1. When you move away, the text slides back to the left, and the image returns to the default state in A. The blue box would behave the same way, linking to Page 2.
C) In a similar manner, if you hover over Box 4 (bottom right), the button would change and text and lines would slide out from right to left. Also, the center image would change. The right button and center image would link to Page 4. When you move away, the text slides back to the right, and the image returns to the default state in A. The green box would behave in the same manner, linking to Page 3.
The closest I've found is this: jQuery image slide on hover effect (horizontal) I was thinking that if I used the static images of all (A) as a background image, maybe I could create a transparent sprite, with only the active version of the hovered button and the center image, to slide left or right on hover.
I can see how the above example might would work for Boxes 1 and 3 (top left and right) and give the illusion of the lines sliding out as the image slides either left or right, but I'm not sure how it would work for Boxes 2 and 4.
Am I on the right track, or am I asking for way more than what's possible in JQuery? I'd be fine with loosing the animated text (I could just make them part of the hover images), but the buttons and center image need to change on hover, and they need to link to a page.
I've made a widget in jQuery that was confused with flash before. I think you need to breakdown each element of your widget into discrete pieces. You are making a new widget. There will be no methods doing what you want. You will have to use the .animate() method explained here. http://api.jquery.com/animate/ You will be animating one CSS class to another CSS class using the .animate() method.
This page has a good primer on the animate method.
http://viralpatel.net/blogs/2010/03/understanding-jquery-animate-function.html
Here's what I would do:
I would make the HTML of the page you want.
I would create CSS of each style of box that you will have.
I would have all the same CSS directives on every box that will
animate. I have found the animate method more agreeable if all CSS
that is to be computed has the same parameters but with different
values.
I would use full resolution images in the 4 outer boxes.
I would animate the div containing the image, not the image itself.
I would make the image fill the div dynamically so that when I
changed the size of the div the image would be a gimmie.
I would work in firebug testing out different commands and see how
they behave. This is critical. The interactive javascript console
is your friend.
This is a big task... when you're done this will be a nice feather in your cap! Maybe after that you could turn it into a jQuery plugin for others to use!
I decided to mess around with this for a bit, here is what I whipped up so far. No links as yet, but for a half hour I don't feel too bad about that :)
http://jsfiddle.net/BH8s5/3/