Slideshow which adjusts images to screen dimensions

[son]

Hi there,

Does anyone know good Javascript slideshow that I could use on website where images adjust automatically to screen size? Am after a way to have website container and images adjust to whatever screen size is used... Found some marvellous jQuery slideshows, but they all seem not to be what am after...

Thanks,

Son

[justsomeguy]

If you use CSS to set the dimensions to a percentage of the screen then it will adjust. It may take some playing around with it to get it right, but that's how you do it.

[son]

Thanks for your reply. I tried this with a website container which is 90% wide and high which was also set to position relative. I then set the image to 90% (width/height), but it looked distorted. The Javascript I used uses the exact dimensions and this is probably wher the distortion comes from. However, I am not very good at Javascript, so am not sure if the script used could be adjusted. Hence am after another one...

Son

[justsomeguy]

If you're setting both the width and height of the image then it's going to change the aspect ratio. If you set only the width, or only the height, then it will scale the other one to match the ratio.

[son]

Okay. Got this. But issue here is that there are portrait and landscape photos and my friend want them in each case to be as big as possible. Maybe not possible then and have to stick to make either width or height 90%? And you think it is not a problem that slideshow sets dimensions? Shall I set them to very high then?

Thanks,

Son

[justsomeguy]

I can't really comment on the code without seeing it. If the images are preloaded on the page, and just hidden, then you can use Javascript to get the width and height of the image, check which one is larger, and set that dimension to the percentage. I don't think there's a way to get the dimensions of an image with Javascript before it is rendered, you would need to use PHP to do that.

[son]

I use in head of page;

<script type="text/javascript">var mygallery3=new fadeSlideShow({wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshowdimensions: [800, 533], //width/height of gallery in pixels. Should reflect dimensions of largest imageimagearray: [["pic1.jpg", "", "", "Picture Holiday"],["pic2.jpg", "", "", "Picture House"],["pic3.jpg", "", "", "Picture Pool"],displaymode: {type:'auto', pause:4500, cycles:0, wraparound:false},persist: false, //remember last viewed slide and recall within same session?fadeduration: 1500, //transition duration (milliseconds)descreveal: "always",togglerid: ""})</script>

As you can see the dimension of image container need to be entered and hence I think I have to get different script. As for the rest is just the given jQuery code in two separate .js files. Am not very good with Javascript and have been thrown into the deep end with this. This is why I would rather like to use something that is already working.

 

Thanks,

Son

[dsonesuk]

If you are identifying the image in a array, cant you identify what type it is? as in portrait or landscape, and apply a class to represent this, and apply width 100% or height 100% to appropriate class applied.

[davej]

I just wrote something like that recently. I think this is the relevant section of code...

newdiv.id = 'imgdiv';slide.appendChild(newdiv);view = document.createElement("img");var winwidth = window.innerWidth;var winheight = window.innerHeight;if (winheight > 0.75 * winwidth){//alert('width limited');view.width = Math.round(winwidth * 0.8);//width limitedview.height = Math.round(0.75*view.width);}else{//alert('height limited');view.height = Math.round(winheight * 0.8);//height limitedview.width = Math.round(1.333*view.height);}

Online: http://www.stlcanoekayak.com/images/saint_june20_2013/default.html

Edited July 24, 2013 by davej

[son]

dsonesuk,

As I have not much knowledge about Javascript would not even know where to start to change the code, so have to admit that I would be useless in trying this...

davej,

I realise that this bit needs to go in script tags within head section, but am not sure what else I need to do in html for this to work. I created a div with id="imgdiv" and put inside few images. But this did not work. How would I test your script?

Thanks,

Son

[davej]

You can play with something like this...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Slideshow</title><style>#view1{border:1px solid black;width: 320px;height: 240px;display: block;}</style><script src="jonerror.js"></script><script>var view;var folderpath = 'images/';var filenames = ['Tree.jpg','Garden.jpg','Creek.jpg','Autumn.jpg'];var images = [];var n = 0;window.onload = function(){view = document.getElementById('view1');document.getElementById('btn1').onclick = start;for (var i=0 ; i<filenames.length ; i++){images[i] = new Image();images[i].src = folderpath + filenames[i];}function start(){var vw, vh;var winwidth = window.innerWidth;var winheight = window.innerHeight;if (winheight > 0.75 * winwidth){vw = Math.round(winwidth * 0.8);view.style.width = vw + 'px';//width limitedvh = Math.round(0.75*vw);view.style.height = vh + 'px';document.getElementById('out').innerHTML = 'width limited: '+ view.width +'x'+ view.height;}else{vh = Math.round(winheight * 0.8);view.style.height = vh + 'px';//height limitedvw = Math.round(1.333*vh);view.style.width = vw + 'px';document.getElementById('out').innerHTML = 'height limited: '+ view.width +'x'+ view.height;}var btn1 = document.getElementById('btn1');btn1.value = 'Stop';btn1.onclick = stop;run();}function run() {if(document.getElementById('btn1').value=='Stopping'){var btn1 = document.getElementById('btn1');btn1.value = 'Start';btn1.onclick = start;}else if(n<filenames.length){view.src = images[n].src;n++;setTimeout(run,2500);}else{n=0;view.src = images[n].src;setTimeout(run,2500);}}function stop() {var btn1 = document.getElementById('btn1');btn1.value = 'Stopping';btn1.onclick = null;}}</script></head><body><img id="view1"/><input type="button" value="Start" id="btn1"/><span id="out"></span></body></html>

[phpsqlitesite]

I have one at http://phpsqlitesite.com/web-image-viewer/ you can base off of. If you set the max-height and max-width CSS properties to 90% instead of height and width I think it will do what you want.

[son]

Thanks for your inputs... Will have a go and see how I get on with this. Am on holiday now, but still need to finish this off. Guess a good incentive to get on with it as then there is no reason not to relax next to the pool:-)

 

Son

[davej]

You might want to modify my example as follows...

// code presumes all images have a 3:4 ratio.if (winheight > 0.75 * winwidth){vw = (winwidth - 20);view.style.width = vw + 'px';//width limitedvh = Math.round(vw * 0.75);view.style.height = vh + 'px';document.getElementById('out').innerHTML = 'width limited: '+ view.width +'x'+ view.height;}else{vh = (winheight - 35);view.style.height = vh + 'px';//height limitedvw = Math.round(1.333*vh);view.style.width = vw + 'px';document.getElementById('out').innerHTML = 'height limited: '+ view.width +'x'+ view.height;}

Edited July 30, 2013 by davej

[dsonesuk]

Adjusts to whatever type of image (landscape, portrait, square) and adjust to whatever size proportional browser window you have (or outer container size used), including across dual monitors , restarts on resize of browser window, image aligned horizontal and vertical. enjoy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title>    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/var current_div_box, slide_t, numberOfDiv, widthOfDiv;var Div_slide_duration = 400;var Div_to_next_duration = 5000;function initJQ(){$('#outer_slide').css({'height': $('body').height()});$('.box_area').css({'width': $('body').width()});var current_pos=0;$('#outer_slide img').each(function(){//$(this).attr('rel', $(this).width()+", "+$(this).height()+", "+$('body').width()/$(this).width()+", "+$('body').height()/$(this).height());var img_height_div = $('body').height()/$(this).height();var img_width_div = $('body').width()/$(this).width();$(this).parents('.box_area').removeClass('land port')if(img_height_div <= img_width_div)    {    $(this).parents('.box_area').addClass('port');    if($(this).height() > $('body').height())        {        $(this).css({'height': $('body').height()})        $(this).css({'width': 'auto'})        }    }else    {    $(this).parents('.box_area').addClass('land');    if($(this).width() > $('body').width())        {        $(this).css({'width': $('body').width()});        $(this).css({'height': 'auto'});        }    }$(this).parents('.box_area').css({'left': current_pos});current_pos=current_pos+$('body').width();    });    numberOfDiv = $('.box_area').length;    widthOfDiv = parseInt($('.box_area').css('width'));    $('#outer_slide').css({'width': numberOfDiv*widthOfDiv});    current_div_box = widthOfDiv;    $('#outer_slide').stop(true,false).delay(Div_to_next_duration).animate({'left': -current_div_box}, Div_slide_duration, 'linear', function(){    slide_t = setTimeout("nextDiv()",Div_to_next_duration);});}$(window).load(function(){$('.box_area').eq(0).clone().appendTo($('#outer_slide')) initJQ(); }); $(window).resize(function(){  window.setTimeout('location.reload()', 100); });function nextDiv()    {    clearTimeout(slide_t);    current_div_box=current_div_box+widthOfDiv;        if(current_div_box >=((numberOfDiv*widthOfDiv) ))        {        current_div_box=widthOfDiv;        $('#outer_slide').css({'left': 0});        }        $('#outer_slide').stop(true,false).animate({'left': -current_div_box}, Div_slide_duration, 'linear', function(){                slide_t = setTimeout("nextDiv()",Div_to_next_duration);});    }/*--*//*]]>*/</script><style type="text/css">body, html {margin:0; padding:0; height:100%;}#slide_wrap {overflow:hidden;}#outer_slide {position:relative; }.box_area { margin: 0 auto; position:absolute; top:0;}.land {display:table; width:100%; height:100%; }.land div {display:table-cell; vertical-align:middle;}.land img {width:100%;}.port {height:100%;}.port div {height:100%;}.port img { display: block;    height: 100%;    margin: 0 auto;}</style></head><body><div id="slide_wrap"><div id="outer_slide"><div class="box_area"><div><img src="/images/image01.jpg" alt=""></div></div><div class="box_area"><div><img src="/images/image02.jpg" alt=""></div></div><div class="box_area"><div><img src="/images/image03.jpg" alt=""></div></div><div class="box_area"><div><img src="/images/image04.jpg" alt=""></div></div></div></div></body></html>

 

 

 

Edited July 31, 2013 by dsonesuk