I am implementing the rotation one at a time using jquery. I have some images I want to rotate one at a time using maybe "touchmove", or "swipeleft" or "swiperight".
First, I make a background where I can place my all images. My problem is that can I give a static value (top left) in starting and change the top and left value on swipeleft and swiperight event.
This is what I want to achieve:
My code:
<body>
<div class="outer-container">
</div>
</body>
.outer-container{
background-image: url(images/dial.png);
width: 400px;
height: 403px;
background-size: cover;
top: 280px;
left: 32%;
position: absolute;
}
This is what it looks like right now:
For adding new images:
Just put a bunch of these: <img src="--path--" style="position:absolute;top:--value--;left:--value--;" id="--uniqueID--"></img> and replace --path-- with the path to the image and --value-- with the appropriate positions. Also replace --uniqueID-- with a unique ID (no two pictures should have the same ID).
I'm not completely sure what you're asking, but you can include a stylesheet in your page to set initial top and left values, and then use jQuery's .css() to dynamically change those values.
$('.outer-container').on('swipeleft',function(e){
e.preventDefault();
$('#--uniqueID--').css("left",newLeftValue);
$('#--uniqueID--').css("top",newTopValue);
});
replace --uniqueID-- with the picture you want to move.
Replacing newLeftValue and newTopValue with appropriate values.
See http://api.jquery.com/css/ for more information on jQuery's css method.
Related
I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.
I came across this site, and wanted to implement something similar to their picture changing logo whilst the mouse is moving into my own site. I'm not sure if it uses jQuery as the page source is a little confusing, is there anyway for me to do this within javascript?
Actually, that site is using a background sprite, and display each logo changing the position of the sprite.
This is the sprite image for the logo:
http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png
You should do some math based on the sprites layout and how 'quickly' you want to change the image.
See this,
http://docs.jquery.com/Tutorials:Mouse_Position
And then change the element's background position.
You could also accomplish the same effect using css if you have a div or some other block element instead of an image tag.
#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}
#logo:hover {
background: url('logo_hover.png');
}
I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image
I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.
Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.
I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.
After looking through W3Schools I'm still not sure if this is possible or not.
The idea is to have the div be a progress bar. (Yes, I am aware of jQuery UI's progress bar.) I would like it to start out 100% filled with one background-image, but overtime have it fill from 0%/100% to 100%/0%.
I see that it is possible to have multiple background images specified using css: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple
but I am not sure how to extend that logic to having only % widths. Any ideas? Thanks
You can't set the width of a background image. But the solution is easy. The div by itself is the progress bar at 0% (so has the unloaded background image), then have another div inside that which is the actual progress (which animates from 0% to 100% and has the loaded background image). So you animate the width of the div inside the progress bar to represent progress.
This site has a few examples that use a span within a div:
http://css-tricks.com/css3-progress-bars/
it's not using images (just CSS3), but you could easily update it have background images on both the span and the div. CSS3 does allow multiple background images (http://www.css3.info/preview/multiple-backgrounds/) but I'm not really sure if it's the best use for your example.
Using position: absolute; or position: relative;, it's possible to overlay one image with another; you'll have to be careful with the z-index, though. You'll then be able to animate the width of the image you want to act as the 'progress meter' using jQuery's animate() function, like this (assuming your progress meter image width starts out at 0px and will end up at 100px):
$("#progress_meter").animate( {"width": "100px"}, 5000);
No, but you can set another div on top of the initial div and have a higher z-index property.
For example, on the code below, div-a will be on top of div-b:
.div-a {
with: 50%;
height: 30px;
z-index: 2;
}
.div-b {
width: 100%;
height: 30px;
z-index: 1;
}
I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.