I am trying to implement a twitter bootstrap carousel. Except, I need to put content (containers, rows, spans, copy) in the slides rather than a big image. But, I do have a big image (1366x450) to display as the background of each slide, scalable/responsively.
I can't quite find a way to do this so that the background image scales correctly and the slide displays at the responsive sizes needed. I need quite a bit of padding top and bottom of the content.
Any ideas where to start?
Related
I have recently worked on a site that is effectively a series of long scrolling pages. It has some large background images the make use of a parallax effect as well as some carousels and regular text content. I am using [slick] by ken wheeler for the carousels. 1 I Live demo site here
My question is, is anyone aware of a way to create a carousel of large images (like the one pictured below)that also makes use of a parallax effect? the effect is currently achieved using the Parallax.js plugin (http://pixelcog.github.io/parallax.js/) but I am open to other plugins/approaches. Thanks in advance for any ideas or pointers in the right direction.
Screenshot of current carousel that I wish to add parallax effect scrolling to:
*edit: I have tried creating multiple slides within the carousel using the parallax.js method to add a background image. However this just keeps the first image used as a constant background and does not slide off screen when the arrow is clicked
so I'm using WP metaslider for a slideshow/gallery display. Everything works great with it, except instead of clicking on the image in the slider and opening its original size in a new window, I would prefer to click on the image in the slider and it enlarging within the slide, similar to the accordion gallery styles, but I want the image clicked on to get larger and the other images to remain the same size or get smaller.
I've tried CSS and javascript shown here but it did not work.
I am open to other plugins that may give me a closer result than this, but the accordion plugin here is the next closet but I still want to be able to see all of the images without them being cut off.
http://kerimthedj.com/new/photos
I'm wondering if it's possible to apply a loader image to only a specific part of content on a webpage?
All the tutorials I've seen for loader images are for entire webpages - what I would like to accomplish is to apply a simple loader only to a div.
I'm building a website that has 2 profile images for staff members layered on top of one another, so when you hover over the image, it fades to the image at the back. I used this method because we want the smooth transition when hovering.
The only problem is that when you open the page with a slower internet speed, you see the bottom / back image until the top one loads, which is not what we want. You should only see the bottom image when you hover over the profile image.
Any ideas how I can create a loader image for only this part of the content?
Here's one of the pages on the development server: http://hanrickcurran.azurewebsites.net/tony-hunt/
Thank you for the info DeeMac. I didn't even think of doing it the way you mention with hiding the bottom image until it is hovered.
I've changed the code, so now the content in the bottom / back is set to 'visibility:hidden;' and only 'visibility:visible;' when the area is hovered.
The website is http://teothemes.com/wp/Teo/ and the section I'm reffering is the Portfolio section with the filterable portfolio. On hover on each element, two icons show up http://prntscr.com/1a1wxx
If you click on the "+" one(which means extend), the slider is totally messed up, http://prntscr.com/1a1x00 . I don't understand why it takes all the images in just one slide. And, it happens just on the first time I load a portfolio, if I try it for other portfolio items after I open the first ope, it works just fine.
I've tried setting the position to relative, thought it's a css problem with margins, padding, the width of the top container, I set it to 100%, but it just doesn't want to work.
I think the problem is with some of the default CSS code for the flexslider container, but I'm not sure what exactly to check.
Any help is appreciated.
So, I have this site I'm throwing together. My image gallery is pretty basic, but doesn't need to be dynamic anyway so I don't mind.
My question is this... I have the motion down, but I can't figure out how to collapse the image without it squashing the contents.
I either want them to slide nicely off the #container div, or have the vertical bars wipe between images... Not sure how to explain this in text.
Here's the site in question:
http://intwind.com/test/