Jump to content

Slideshow which adjusts images to screen dimensions


son
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by davej
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by davej
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...