Forums

Al3ks

I'm using the tinybox javascript code which basically opens up an image on the screen when a link is clicked.
The thing is, I can set the height and width of the picture in the javascript code, but I want it fit 80% of the user screen resolution so that it doesn't become too larger on smaller screens.

Here is the code I'm working with:


<script type="text/javascript">
	var content2 = "<img src='gallery/pic/b1.jpg' width='900px' height='640px' alt='' />";
	T$('b1').onclick = function(){TINY.box.show(content2,0,0,0,1)}
</script>

Any one can help me, please?

karlpcrowley

var newHeight = window.innerHeight*0.8 + 'px',
newWidth = window.innerWidth*0.8 + 'px';

put these variables in for the height and width :D

Al3ks

Hmm I did it but it doesn't seem to work.
Can you put the two bits of code together, maybe I did it in the wrong way or something... :P

Senff

If @karlpcrowley will allow me:

<script type="text/javascript">
	 var newHeight = window.innerHeight*0.8 + 'px',
	 newWidth = window.innerWidth*0.8 + 'px';
	 var content2 = "<img src='gallery/pic/b1.jpg' width='"+newWidth+"' height='"+newHeight+"' alt='' />";
	 T$('b1').onclick = function(){TINY.box.show(content2,0,0,0,1)}
</script>

Al3ks

Cheers, that helped! :)
Thanks karlpcrowley.

karlpcrowley

Don't forget to thank @Senff
:) :)

Al3ks

Thank you @Senff :) :)

Senff

Anytime :)

treehouse : what would you like to learn today?

Forums

Set a picture to dispaly on 80% of the screen width