Develop Reference

Displaying bxslider inside an image

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

Reserve vertical space for slider image on page load

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.

Full width-of-screen background slider using CSS on a static website

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).

Vertically align different img sizes in different div sizes where the img is larger than the div

I'm trying to align images inside divs vertically... not a problem.
My problem arises with these conditions.
The images will be undetermined & different sizes.
The images are larger than the divs and need to be masked by the divs.
The site that uses this is built on the 320 & up template, calling media queries to render the
page for different screen sizes & therefor the containing divs differ depending on screen size.
When viewed on smart phone/tablet devices the containing div will change size when the device is turned (no page refresh) – the image needs to remain centered.
I can't use display:table-cell because the images are larger than the div so with this option the hieght of the divs and overflow:hidden don't work.
I tried jQuery vAlign which works great.. if you're not changing the screen size (such as turning a device). As it's is called on (document).ready the page needs refreshing to update the alignment of the images.
Is there a way to trigger vAlign via media query?
If not is there a hack/fix to the table-cell method which will allow the smaller div to mask the larger img with overfolw:hidden ?
UPDATE:
Been playing around with pure CSS (working example here) but still can't get it to work :(

I'm not sure what you meant, but if I understood correctly, using the following structure
<div class="vertical">
<div class="wrapper"><img src="image.jpg"></div>
</div>
And the following CSS
div.vertical { display:table-cell }
div.wrapper { display:block;position:relative;overflow:hidden; }
div.wrapper img { position:absolute; }
You should be able to mask (as in crop?) the picture and be able to align them vertically. Note that the div.vertical class is just a dummy div to show which of the divs would be the on to align vertically at the moment and you should replace only the contents of that div in your application.

Why can't I figure out the width of elements with automatic widths?

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
});