I want to make a javascript/jQuery/HTML based image viewer which is sort of a cross between a book page flip and an iTunes coverflow interface without the left side of either, which would work on mobile device browsers.
I've been looking for tutorials which I can use as a starting point, but I haven't been able to find anything yet. Can anybody offer some advice on how to get started on this project? I would like to be able to come up with a rough mock up pretty quickly so it would be helpful to be able to re-use code from a tutorial or existing open-source project.
What about pagePiling.js plugin?
It creates a stack of pages and on it you can add images if you want, just like in this example.
And of course, you can use it horizontally if you prefer.
Related
So, I'm trying to get started conceptualizing a project for a friend of mine and I've run into a sort of problem right away.
They're wanting to do a photography website, which isn't a big deal, but I'm not sure how to go about replicating the functionality they're seeking for their front page.
This link is an example they gave me. They're looking to have a sort of "tile" setup of images from a gallery/folder that cleanly line up along the edges of the page (if possible) and are also responsive, so when you reach certain breakpoints, the images obviously shift to have less in each row, but still keep the same clean look.
http://www.amishakpatel.com
I figure it's probably possible to do this with various client-side JS libraries, but I'm out of practice and didn't know where to turn.
Any suggestions would be fantastic, I get the feeling that this specific part of this project is going to be more complex that I originally thought, and I'm not SUPER experienced in the art of writing responsive layouts, but I wanted to give this a shot and get better at it.
My original plan was to develop this thing as a WP website/theme, but now I'm almost wondering if due to the nature of the project that I should maybe just use WP for the backend and content management, then do the front-end separately using front-end that I'm a bit more comfortable with (React) as it's looking like the whole project will be heavy in JS anyway to do the stuff they're wanting to eventually do.
Thanks in advance for any suggestions!
After reading the advice given by the few folks who commented, I did some digging with Mosaic/Masonry layouts, and found this:
https://www.imagely.com/wordpress-gallery-plugin/
I'm gonna give this a shot, which lets me stick with WP for a platform for ease of use, keeping the whole project simple.
Thanks a lot, folks! I figured there was PROBABLY a word for what I was looking for in terms of layout, but didn't know what to Google. :P
I am looking for a plugin for spinning wheel in jquery. I came across the site
http://www.professorcloud.com/mainsite/carousel.htm . There is a beautiful demonstration of spinning wheel here but I need the images to be controlled on mouse-drag and also I want the same rotation to happen vertically as well. please help
I believe what you are looking for is commonly referred to as a 'Developer'. When you come to Stackoverflow (in general) you provide a source code that we look through to find out where your mistake(s) is/are. Then we tell you why the mistake(s) happen/ed, and steer you through correcting the mistake(s). If what you are you looking for is the type(s) of tool(s) that a common jQuery developer would use to achieve this then that's completely different.
For starters, it looks like you have found a carousel that you want to use to create the rotating effect. That's fine. You'll need to go through their API and instructions to get a grasp on how to integrate your next step:
Drag & Drop in jQuery
My favorite plugin for this is jQuery UI. It's a complete suite for jQuery that provides an array of different enhancements, including the 'Drag & Drop' effect you want.
http://jqueryui.com/demos/droppable/
You'll have to (once again) work with the API and instructions, and create events to control how the carousel should be affected by the Drag & Drop plugin.
Vertical Carousel
Some quick digging regarding the need for Vertical implementation lead me to a Stackoverflow question regarding the same exact needs.
JQuery Cloud Carousel that scrolls vertically
He also discussed what changes you need to make to the script in order to account for the change in axis. That's a huge +.
You can see a working version of it below -
http://www.inspiritandintruth.com/ (look at the right hand side)
All of this combined should get you what you want. With a bit of work and adjusting, you'll be able to get your end result.
Best of luck.
I have been asked to create a website where the homepage consists of a fading image slideshow and a navigation bar at the bottom of the page. The client wants the image to cover the entire screen with the exception of this nav bar with a pause/play button at the top right of the screen.
I have built this using the supersized jquery function and made a few tweaks, but there seems to be performance issues with the fading effect (its very static and transitions dont appear to flow very smoothly).
Before I get stuck into the remainder of the site, I want some advice from the seasoned experts out there on using this function, or the jbgallery jquery function I have recently come across. Alternatively what is the general consensus on building the whole site in flash.
I haved used flash sparingly before due to CMS issues (which I have now worked around) and ipad display problems etc so would need to do a bit of learning to go down this route but am more than happy to adopt the approach if people really think it is worthwhile. My experience to date has consisted of including swf animations and components within php pages populated via mysql using xml files.
Looking forward to any and all advice (not simply for this project but future ones aswell!).
Thanks
JD
I'm actually trying to work out the exact same problem right now. I don't have a perfect/easy solution yet, but here's something that might work:
http://playground.benbarnett.net/jquery-animate-enhanced/
It's a jQuery plugin that takes your standard animate() calls (and a few others) and uses CSS3 transforms when possible. This will theoretically improve the frame rate of transitions since CSS3 effects perform better in modern browsers. I have smaller demos working, but am having trouble getting a lower frame rate for full-browser images.
I've found a feature on two different websites that I'd like to include on one of my web projects, but I can't figure out how they're doing it. I think they're using either jQuery or mootools, but I'm not sure.
http://www.x-plane.com/index_desktop.html
I'm new here so I don't have the reputation to post the other link, but if you do a Google search for "Andrews Institute of Orthopaedics" its the top result. I'll see if I can answer a few questions to earn my keep.
The thing that I like about these is that the images and text (including links) are all rotated together. I've done a few web searches related to cycle, rotate and slide but it's not coming together for me. Can anyone give me a nudge in the right direction?
The page you linked is using prototype for this (usually because that's what the author knew, as with most libraries), and it is custom script they've written. However, jQuery has a lot of plugins with various styles, just see what one fits your taste best. I'd suggest taking a look here and a look here.
Anything you find can be automated on a timer like the site you linked, or use buttons, or both. These are all pretty flexible, I'd start by finding the plugin you want, try and get it going, then asking a question here if you have problems getting it to behave exactly how you want.
I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code