• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 415
  • Last Modified:

Reducing size of a full-screen image

I am experimenting with a jquery slide show which is published at http://www.aaronvanderzwan.com/maximage/bgslideshow.php    Is there a way to make the images a designated percentage of screen width, instead of full-screen?  Also, I set the variable "background=false", but the images still appear as background, visible behind text and other images.  I would like to contain the slide show as a div element at a specific part of a web page, and not have it overflow.
0
ddantes
Asked:
ddantes
  • 19
  • 15
1 Solution
 
effxCommented:
Have you tried a different plugin?

I find this one would suit your requirement better:

http://jquery.malsup.com/cycle/
0
 
ddantesAuthor Commented:
Thank you for your comment.   It isn't immediately apparent from the demos on that page whether the cycle plugin automatically resizes the images, proportionally, to fit the browser window.  That is a feature of MaxImage which is relevant to my purposes.  Do you know whether the cycle plugin has that feature?
0
 
effxCommented:
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ddantesAuthor Commented:
Thank you for this example.  However, it is also a full-screen background image.  I'm looking for something which can be configured with a width as % of screen width, scales proportionally with the browser window, and is not a background image (so that it can be integrated with other web content).  I have such a slide show at www.mauitradewinds.com, but the quality of fade transition under IE and Safari isn't as smooth as I would like.
0
 
effxCommented:
I have looked at the "backstrech" plugin, you can edit the plugin source on line 43, it sets the height and width to 100% you can change this down as required.
0
 
ddantesAuthor Commented:
Thank you for that.  However, I tried editing the width and height in jquery.backstretch.min.js at this point: ({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"})  and it had no effect on the full-screen image presentation.  I also edited code for the style of .container in the html file, again with no effect. Perhaps I am overlooking the attritubte you are describing.  
0
 
effxCommented:
Ignore my last, if you revet this to "100%", you can modify line 103 from

                $("#backstretch, #backstretch img").width( bgWidth).height( bgHeight)
                                                   .filter("img").css(bgCSS);

to (Minus 100px):

                $("#backstretch, #backstretch img").width( bgWidth - 100).height( bgHeight - 100 )
                                                   .filter("img").css(bgCSS);
or (Half):

                $("#backstretch, #backstretch img").width( bgWidth / 2).height( bgHeight / 2 )
                                                   .filter("img").css(bgCSS);
0
 
ddantesAuthor Commented:
Forgive my ineptitude, but I can't find the line you are modifying.  It isn't in the copy of jquery.backstretch.min.js which I downloaded from the site, or in any of the examples in the download zip archive.
0
 
ddantesAuthor Commented:
I found the file.  It is the un-minimified jquery.backstretch.js   But that file is not referrenced in the example.  Should I substitute it for the minified version?
0
 
effxCommented:
0
 
ddantesAuthor Commented:
OK, now there is some progress!   Please see www.mauitradewinds.com/Backstretch    The images still behave as background, even though they are smaller.  In other words, they compete with other web content for the space.  Also, resizing the window pushes the images off the page (I haven't been able to center the div).  But, before you spend more time on this plugin, I'm concerned that the original example does not fluidly resize as I would like.  When the window is maximized, the image is larger, but not all of it is seen.  When the window is made progressively smaller, the image gets smaller, and more of it is seen.  And then it reaches a limit, where it starts to become cropped as the window is made smaller.  I need the entire image to be visible, regardless of window size.  Currently I am using a plugin which accomplishes this (www.mauitradewinds.com) but I'm dissatisfied with the smoothness of fade transition under Safari.  So I'm looking for a better fade slideshow plugin, and that quest resulted in my question about MaxImage.
0
 
effxCommented:
Ok, if we go back to basics, ignore the backstrech plugin.

Use the cycle plugin and put the image where you want it, we can then handel the resizing after using a function.

Set this up and i'll write a resize function for you.
0
 
ddantesAuthor Commented:
That is a very generous offer.  I'll post back when the Cycle plugin is set up.
0
 
ddantesAuthor Commented:
The cycle plugin is set up at www.mauitradewinds.com/Cycle  The index page contains this code: <style type="text/css">.slideshow { height: 602px; width: 1000px}.  Ideally the width would be configurable as a percentage of window size, and the height would scale proportionally.   Thank you for your expertise in creating a resizing function.
0
 
effxCommented:
it will be something like:
$(window).resize(function() {
	var slideShowWidth = $(window).width() / 0.74;
	var aspect = $(".slideshow").height() / $(".slideshow").width();
	$(".slideshow").height(aspect * slideShowWidth).width(slideShowWidth);
	$(".slideshow img").height(aspect * slideShowWidth).width(slideShowWidth);
});

Open in new window

0
 
effxCommented:
I will look into it properly in about an hour
0
 
ddantesAuthor Commented:
0
 
effxCommented:
Sorry the code was right just the number was slightly out:
$(window).resize(function() {
	var slideShowWidth = $(window).width() / 1.3;
	var aspect = $(".slideshow").height() / $(".slideshow").width();
	$(".slideshow").height(aspect * slideShowWidth).width(slideShowWidth);
	$(".slideshow img").height(aspect * slideShowWidth).width(slideShowWidth);
});

Open in new window

0
 
ddantesAuthor Commented:
That resizes perfectly!   I just need to know how to set the image width as a % of window width.
0
 
ddantesAuthor Commented:
Also, if the window size is reduced, and then enlarged to its original dimensions, the image ends up bigger than it was originally.
0
 
effxCommented:
This line:

var slideShowWidth = $(window).width() / 1.3;

if you change the number at the end this will adjust the percentage for example:

var slideShowWidth = $(window).width() / 1.7;
0
 
ddantesAuthor Commented:
Very good.  Is there a way to maintain the image size when the window is reduced, and then restored to its original dimensions?  The image ends up larger than it was originally.  It must be past close to bedtime there, so I don't want to keep you up longer.
0
 
effxCommented:
You could do this:
$(window).resize(function() {
	var slideShowWidth = $(window).width() / 1.3;
	var aspect = $(".slideshow").height() / $(".slideshow").width();
	$(".slideshow").height(aspect * slideShowWidth).width(slideShowWidth);
	$(".slideshow img").height(aspect * slideShowWidth).width(slideShowWidth);
});
$(window).resize();

Open in new window

0
 
ddantesAuthor Commented:
I've uploaded the latest version so you can observe what happens.  Try reducing and enlarging the window, or even reducing the window slightly, and the image becomes larger than its original size.
0
 
effxCommented:
Use this instead:
$(window).resize(function() {
	var slideShowWidth = $(window).width() / ($(window).width() / $(".slideshow").width());
	var aspect = $(".slideshow").height() / $(".slideshow").width();
	$(".slideshow").height(aspect * slideShowWidth).width(slideShowWidth);
	$(".slideshow img").height(aspect * slideShowWidth).width(slideShowWidth);
});

Open in new window

0
 
ddantesAuthor Commented:
Thank you.  I substituted that code, but the images don't resize with the window.
0
 
effxCommented:
Sorry, my bad, the division should be static and not fluid:
$(document).ready(function(){
var divis = ($(window).width() / $(".slideshow").width());
$(window).resize(function() {
	var slideShowWidth = $(window).width() / divis;
	var aspect = $(".slideshow").height() / $(".slideshow").width();
	$(".slideshow").height(aspect * slideShowWidth).width(slideShowWidth);
	$(".slideshow img").height(aspect * slideShowWidth).width(slideShowWidth);
});
});

Open in new window

0
 
ddantesAuthor Commented:
That solved the problem, and the images return to their "native" size when the window is restored. Finally, I don't see a numeric denominator anymore, so how is the width of the slide show to be configured?
0
 
effxCommented:
You set the initial width of the image in the CSS or img size
0
 
ddantesAuthor Commented:
Can that setting be as a percentage, or must it be a fixed pixel size?
0
 
effxCommented:
Percentage should work
0
 
ddantesAuthor Commented:
Very good.  I'll need some guidance on the code for that, because my attempts at substituting % for fixed pixel value result in the images not appearing, or the resizing not performing.  However, you have assisted me beyond my expectations already, and I want to accept your solution without further delay.  I will post a related question about how to code the percentage, and if you're available, please respond.
0
 
ddantesAuthor Commented:
Expert participated beyond the call of duty and invented a great solution.
0
 
ddantesAuthor Commented:
Dear Effx: If you are available to help me with the % width styling, the question is at
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27419495.html
I experimented with % width, but the resulting slide show frequently (but not always) disappears the moment the window is resized.  The disappearing version is at
http://mauitradewinds.com/Cycle/vanishing.html


0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 19
  • 15
Tackle projects and never again get stuck behind a technical roadblock.
Join Now