I have an image of a computer screen in my landing page and I want the screen to show different images as slides. Is there any way to do this using bxslider or any other method?
you could have your image as a background on .bx-wrapper and use padding and the correct height and width to make the slider fit correctly
Related
I am trying to use bxslider to make a full-height slider that is dependent on the browser window, so the entire slide is always showing.
As it is now, it is adjusting its width based on the browser window, but I can't get it to adjust its height.
Do I have to somehow adjust the image height itself (within the slide) to be based on the browser window?
Is there another slider plugin I should be using for this?
Thanks in advance!
I'm using Flexslider which calculates the image size based on the parent element width, which makes it responsive because it resizes when you change the browser size.
The problem I'm having is that when I load the page, you see a colapsed slider until the images are loaded which makes it look bad. However, if you go to flexslider site at http://www.woothemes.com/flexslider/ you'll see that it has a loader.
Is there an option in flexslider for automatically behaving this? I couldn't find one.
Try giving
min-height
min-width
using CSS to the div block in which you are having the images so that it might atleast not collapse
In flexslider stylesheet they have give .flexslider a min-height of 280px and used a gif loading image as its background. You should use that. Your problem will be solved.
I have a static website and I need to create a background slider with a fixed height of 587px. The width of each image is 2000px wide, but the user only needs to see the image to the width of his or her screen beyond 1000px, the width of the website. The image does not ever need to move, stretch, or respond in any way.
It needs to look and function like, www.adsphoenix.com/2013design/index5.php, but be a background slider. If you select "view background image" (Firefox), you will see the image is wider than most screens. It is aligned to the center and top.
The problem I have is finding a slider to allow the image to go outside of the 1000px website. For example, www.adsphoenix.com/2013design/. All of these images are 587 x 2000px.
Something similar to this would be, www.chattanoogafun.com. However, this slider stretches.
Do you know of a pre-built slider that would work? Or a slider I could change the alignment of? Or something I could do to my code to allow it to work? I have hosting with Blue Host.
You can add the image as background image of a slider div with CSS and use this code:
.slider_div { //or another selector
background: url(../path/to/image) center center no-repeat;
}
If you want to slide your background, you'll need inline CSS to set the background of the slider divs (or use jQuery for that).
Does Facebook in its gallery put image width and height in database?
Using JavaScript, they can not be sure about image width and height until image fully loads. But on FB, image is been loaded while its displaying and image is properly centered horizontally and vertically.
Facebook use display:inline-block for the image and text-align:center for parent div to center image in theater images.
Check out their blog post that explained how they did it. It's a nice CSS code but not all CSS. They use JS to set line-height of one of divs based on window.height.
I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});