I have been searching google and I'm unable to find a website builder that offers such a feature.
So basically what I want is:
Initially on website load a certain zoomed out image is presented to the user and as the user scrolls down (through his mouse/touchpad) certain parts of the image are zoomed in one by one. Instead of the usual scrolling down a page, the scrolling down would instead zoom in on parts of an image, if that makes sense? Is this possible to do somehow?
Related
I'm working in a project of building a responsive website. The painful thing we're having is to deal with the content of the image in different display modes. Please be noted: the image content.
The thing is: in almost pages at PC view, the images are displayed in landscape, with great ratio between width and height. Now when bringing them to mobile view, we have to display it in a different frame. And as you might imagine, now the content of the image was scaled and cropped and then exported to some very weird images on mobile view. Like a wide picture with people are almost in left side, but after being cropped there are only non-sense objects in the picture left.
IMHO, via technical solutions we are only processing the technical attributes of the image (resizing, scaling), we are unable to deal with the image content, that's really a human matter, right?
I'm thinking about 4 solutions:
1 - Despite the customer feelings, we just scale the picture (keep
all content, just resizing it). The output sometimes will be very
ridiculous I guess because of resizing a landscape picture to a
portrait or square one. But that's mostly the easiest way to come up.
2 - Considering to image frame size on mobile view, and auto crop the
picture by picking the center area of the picture. As I said above,
it produced the non-sense picture after all.
3 - Informing customer, whenever they upload a picture, they have to upload 2 copies of it, 1 for desktop view and 1 for mobile view, and they're definitely responsible for the content displaying at front side. Tons of effort need to be spent by customers, but easier for development.
4 - Advanced feature: user can upload only 1 picture, we provide the
different view-ports and a cropper for them to decide how the image
displays on those after being cropped.
I don't have much experience in dealing with these stuff, and not sure how the world out there handling this case. As I see for now Wordpress is only requiring users to upload only 1 picture and it will automatically scale it (my 1st option). Does anyone have experience on this? Can you please share me your solutions and also your thoughts about my above solutions? Thank you.
you can build a simple web application for them to upload the picture and provide your client with a preview of how the pictures with look like for both desktop and mobile. in php, there is the GD library and it is quite easy to use for cropping and resizing.
Apply the 4th and the 1st option so you don't have to deal with it,
Crop and scale with the options you have AND let the customer decide if they want to change it and choose how the image is been displayed.
in case they ask you can say they have the option to fix it, in case they don't want to you already handle the best technological option.
I have a ghost-in-the-machine it seems: I have put a thumbnail with a rollover stage on a Wordpress site I'm working on. It works fine except that it does this strange resizing when the page loads. A small but very annoying thing.
This is the page
I've also added the same code to another Wordpress site I am working on, which is based on the same theme (Quark). It doesn't happen on the other site.
How do I resolve this?
You are using percentages to define the widths of the containers and images, which is fine. However, upon initial page load, not all of your elements are available yet, so the relative percentages gradually reach their end-point when the document finishes loading. Doesn't look like like it's doing too much on my screen but in order to get around this you can load the images via jquery and set it to $(document).ready which will wait until the page is done loading, to even load the iamges.
I'm looking to do a mobile web app in Wordpress. I need the template to have a thin (~3/4 inch) horizontal rectangular section at the very top that can be swiped to the left/right to serve as the navigation. Basically, every time you swipe this section to the right/left, it changes the page below it. I've seen templates where the whole page swipes, but not split in this was as I described it here. If anyone has any pointers for me on how to customize the template like this, I'd really appreciate it.
Try this plugin. They support Swipe left, right, up, down and double tap. you can specify the area where you want wordpress to register the gestures, say in your case it would be the ID of the Div you want user to swipe in. Let me know if you face any difficulty.
I've inherited a small project. The person before me created a native app for iPhone, implemented in objective-c, and my job is to remake it as a webapp with PhoneGap for iOS and Android.
In my predecessor's original implementation, part of the app has the functionality of allowing the user to drop a marker on a map to select a location. I found a comparable way of doing this, but the supervisor wants the exact way she'd done it, which I'm having a little trouble with. Let me describe:
In her native app, the map appears with a marker in the center of it. The user then slides the map around beneath the marker (which stays in place on the screen), until the marker is positioned over the spot they want. Then they hit a button marked "Select," and those coordinates are sent to the app for irrelevant other operations.
I'm trying to do the exact same thing with the google-maps javascript api and html/css, and I can't figure it out. Do any of you Gmaps pros have any ideas?
You may observe the center_changed-Event of the map. When it fires set the position of the marker to the new center of the map.
Another suggestion:
For a better effect instead of a marker you may use a custom control. You may insert a marker-image there so it will look like a marker. To place it in the center, push the control to
map.controls[google.maps.ControlPosition.RIGHT_CENTER]
(it will be vertically centered then) and apply the horizontal centering by adding a right-margin to the control
I've looked a looked and looked for the perfect rotating banner for my website I am creating and I found flex slider, of which I love as it gives you the circled just underneath and the left and right arrows as well. The option for face or slide is what I was looking for too, however I need a plugin that allows the user to upload an image to the banner like Useful banner Manager. (I'm not using UBM as I don't what each banner image to fade to white and then to the next image, but that's how it acts).
Does anyone know a great rotating banner plugin that is easy to follow for wordpress newbies (as this will be integrated into the websites I create for clients) either free or premium?
OR do you know how I might just add the upload option to the flex slider plugin?
If you know the data format that the Flex Slider uses you can simply create a custom post type called 'Banner', restrict the various stock metaboxes, leaving say, only the editor and media upload. Then your clients can simply create new 'banners' by creating a new banner post, and uploading its associated image. This is a nice, simple and easy to understand interface for clients, making it easy for them to add, remove, edit banners.
Then simply do a get_posts on your banners and provide the Flex slider with data in a format it expects.
This has the advantage of not requiring a plugin to create, which is useful if you are distributing themes.
http://codex.wordpress.org/Post_Types