I can use CSS or javascript but I've been struggling with it. It needs to be an "on-click" behavior when you click on the number in the lower right corner... like this one: http://www.winteradagency.com/mrw/images/residential2.jpg
So that when you click on #1 you get the first photo, #2 the 2nd one and so on...
Any ideas?
thanks!
Without showing what you've tried, I'm a little reluctant to just give you the answer. You'll learn more if I don't. If you provide code and show where you're stuck and such, well, that's a different story.
That being said, if you want to use jQuery, there are some nice plugins that have a similar functionality to what you want. One of them being Easy Slider. Here's also a list of 15 jQuery Image Gallery Plugins that I got from doing a quick google search.
Why not create four buttons and align it to right end, and everytime the image changes you update the text of the buttons. Each button could simply update the image to the one corresponding to its number.
Related
I don't know why I've had a few issues explaining this problem so I have created this image to show what I am trying to do.
I have a ticker and I'm simply trying to duplicate it below the existing one with a different list. the black tile bar just represents a break so don't worry about styling. I hope this is possible, if not I would also like to know why.
Many Many thanks, attached is a JSfiddle if it is possible to show a working example in the JSfiddle it would be even nicer :)
I'm looking at this book pages turning script:
www.turnjs.com/#samples/magazine1
There are many options for customization, however it seems there isn't an option for what I want to do.
The way it is now, in order to turn a page, you have to hover somewhere near the corners.
Only then the page corner turns and you somehow guess that by clicking you can go to the next page.
What I want is to make all the area clickable; wherever the mouse hovers, inside the book, one corner or another should bend.
I know I may have to edit the code directly somewhere, but I couldn't find the place although I tried.
It seems all CSS for page turning is inside turn.js file
If somebody can find the code line to be edited, please let me know.
Thanks
The jquery hover will give you the answer for this. Try include this code in your document ready function.
$(".turn-page").hover(function() {
$(this).css({"transform": "rotate(-45deg) translate3d(262px, -263px, 0px)"});
$(this).parent().css({"transform": "translate3d(-633px, 68px, 0px) rotate(45deg)"});
});
Note: This is for testing purpose only. Remove the lines in hover function and add your codes.
I have a web form.
I have a group of about 20 images displayed on the page. I want the user to be able to drag five images into a holding area, and to be able to arrange their order.
On submit, I'd like the names of those images, and their order, to become part of the $_POST data.
I'd appreciate it if someone could point me to a working example of this functionality that I can reverse engineer, point me to an open source project that offers this functionality, or can provide the code to do this.
I am using PHP, with jquery and js
Thank you.
If already using JQuery, go for JQuery UI.
They have actions called DRAGGABLE and DROPPABLE which you apply to divs. It's a very elegant, easy to use setup.
Examples:
Look to the right for more examples
http://jqueryui.com/droppable/
As for posting, at submit time you can iterate through the DOM, find the images in the "holder div" and post that OR you can hook into the event that fires every time an item is 'dropped' and write that to a hidden or other form element what is in each box.
I want to edit image in real-time with javascript only. Im new to Js, so this may be dumb question...
I have 3 images:
Background
Car one
Car two
I want to display one on each other in real time. It should look like this:
And the cars should be moving there and back (I must be able to edit their position without refreshing the page).
Im not asking for complete solution, just a few links or pages and some information where to start with. I know Javascript syntax, I just have never used it in any website. If it's not possible, or it would be too hard, I gonna use flash or Java aplet, Im okay to use jQuery or other Javascript libraries. Thank you for any clues!
You might want to check out jQuery animate and z-indexes. What you'll want to do is with z-index place one on top of the other, then animate with jQuery accordingly.
http://api.jquery.com/animate/
http://css-tricks.com/almanac/properties/z/z-index/
http://www.ppowgallery.com/artists.php has an example of what I want. I want to load a bunch of images and have them appear when you roll over an item in a list or another text link.
Can somebody direct me to a good example? I don't even know what you'd call this effect.
Thanks!
The link mentioned by you in the question itself is an example. Why dont you use it? Basically it creates all the divs with hidden effect and shows them onmouseover of the corresponding links.