I'd like to know if it's possible to achieve something like this slider automatically with javascript/jquery:
http://www.elegantthemes.com/preview/TheSource/
Notice how the slider background changes according to the edge of the slider image. This can be seen easily on higher resolutions.
My objective would be to:
Add a fixed resolution image to the slider and then the background of that image would be "calculated" automatically with JS and create a smooth gradient.
I'm not sure if i made my point clear, so if you have any question please ask.
Thanks in advance!
Do you mean something like the jQuery.cycle plugin?
http://jquery.malsup.com/cycle/
Related
I need to create pyramid slider.
As you can see in my current implementation, I need to have a center image that is in top of rest of items. They form a pyramid structure. Also images are placed under each other and this effect is breaking everything because I need to transform them ( elements on the right side of center image needs to have translateX(-100px) and on the left side translateX(100px). I need to have animations when changing items but due to translateX it looks awful. I created this one using http://kenwheeler.github.io/slick/ but maybe someone know such slider with out of box funcionality ?
Any help appreciated.
http://idangero.us/swiper or just look for a 3d carousel.
With some customization, I finally made it how I wanted :)
I'm kind of new to this and couldn't find any solutions so far that works.
I want to achieve the effect present on the images here: http://www.apple.com/macbook/
When the user scrolls down, the image is going up and vice versa. I took a look into their javascript files (line 28928 in overview.build.js), found the lines that do this but couldn't understood it exactly.
On my website when I want to use this effect I have the image inside a div container as img tag, but I can also place it as background-image.
Thank you for yor time!
I think what you are referring to is a parallax effect. There are a wide variety of jQuery plugins to achieve this effect.
The plugin that I use:
https://github.com/jalxob/cool-kitten
You can find tons of other options by googling "parallax effect"
I made a simple image slider to show the houses at sale of a properties website, but the slider doesn't slide the whole width of the divs containing the images. I made a codepen at
http://codepen.io/anon/pen/Eamns to illustrate what I mean, does someone know how can I slide the element without leaving a small bit of it visible? Somehow I don't like to use the whole lot of sliders that are out there, but building my own. I'll appreciate any help, as you can see I'm using the outerWidth and margin properties to determine the distance of the slide, but it's not very clean and I still don't like it.
Thanks in advance
[1]: http://codepen.io/anon/pen/Eamns
Not sure if your CodePen is complete. If you want something clean and easy to implement, I recommend using the 'jquery cycle' plug-in (http://jquery.malsup.com/cycle/) to create your slider. It is the easiest way I have found to make many types of image sliders.
I would appreciate little help on this.
I wanna add an image/text overlay hover on images of this slider below.
So when someone's hovering the image will appear a 50% transparent black block and the "details" image/text in the middle.
This is an example of hovering (the zoom and details buttons) : http://themes.derby-web-design-agency.co.uk/Lola-Html-Theme/Light/
This is the slider I wanna use : http://codepen.io/anon/pen/Alzhn
Thanks in advance !
No need to reinvent the wheel. Consider the following projects:
http://wowslider.com/jquery-slideshow-huge-demo.html
http://bxslider.com/examples/image-slideshow-captions
For overlays, you can also consider
http://buildinternet.com/project/mosaic/1.0/
Try any of the above links for implementation and be more specific with your question.
For example, I am having issue with X, I want to do Y and I have tried solving this using XYZ. Your JS fiddle is just a copy of your existing project with no indication of what you have tried to solve your problem.
As with any learning environment, I would take small steps first. In your use case, I would tackle the problem as follows:
Require on hover caption
Require slider
Then when step#1 is completed, you can build on top of that and so forth.
What I'm trying to do is something like you see at http://www.nejm.org/doi/full/10.1056/NEJMimc1109704. (Click Play and go to page 5 - the interactive physical exam.) I think they are doing this with Flash, but I'd like to use javascript/jQuery.
Basically there's an image that has multiple captions. The captions have arrows that point to different parts of the image, but that's not essential for me. When you click on different links, different captions appear.
Would I tackle this as an image map? I.e. create a map, and use jQuery to toggle different parts of the map? Is there a plug-in that does that? Google searches aren't helping me - but maybe I don't know what to look for. Any help will be appreciated.
I'm having the same problem and I found imageMapster. Check out
http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
I think this is what you want to do. Just this solution today, haven't figured it out yet. Looks promising though. Otherwise check out qTip2
http://craigsworks.com/projects/qtip2/demos/
Maybe some adaptions let you/us do what we wanna do
Good luck! Keep u updated if I figured it out
Why would you need jQuery?
Anyway, put your main image down, and set its position to be fixed where you want it. You could even put it in a nice container div, just make sure all your caption divs are relative to the same parent. Then put fixed position divs of your caption images over it with a higher z-index in your css. Then place your caption images at the appropriate top and left positions until they are correct. Of course, use transparent PNGs.
All you need to do to toggle them is set the element's style.display to "none" or "inherit"