4 Replies - 861 Views - Last Post: 26 June 2013 - 07:29 AM

#1 back_room  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 25-June 13

html/css/javascript - image display

Posted 26 June 2013 - 06:21 AM

hi there,

following on from my last post, i have the coding working for the gallery, to a point
javascript
<script type="text/javascript">
//<![CDATA[

var image= new Array();
image[0]='img/rhys1t.jpg';
image[1]='img/rhys2t.jpg';
image[2]='img/rhys3t.jpg';
image[3]='img/rhys4t.jpg';
image[4]='img/rhys5t.jpg';
image[5]='img/rhys6t.jpg';
image[6]='img/rhys7t.jpg';
image[7]='img/rhys8t.jpg';
image[8]='img/rhys9t.jpg';
image[9]='img/thys10t.jpg';
image[10]='img/rhys11t.jpg';
image[11]='img/rhys12t.jpg';
image[12]='img/rhys13t.jpg';
var i=0;

function first(){
	if ((i!==0)||(i==0)) {
		i=0;
		document.getElementById("pictures").src = image[i]
	}
}
function previous(){
	if (i>=1){
		i=i-1;
		document.getElementById("pictures").src = image[i]
	}
}
function next(){
	if ((i>=0)&&(i<=image.length-2)){
		i=i+1;
		document.getElementById("pictures").src = image[i]
	}
}
function last(){
	if (i!=image.length){
		i=image.length-1;
		document.getElementById("pictures").src = image[i]
	}
}

onload=first();

//]]>

</script>



CSS

<style type="text/css">

body {
	bacground-color:#ffffff;
}

#pictures {
	width:inherit;
	height:inherit;
}

#dvtwo {
	width:300px;
	height:300px;
	background:#ffffff;
	position:absolute;
	top:auto;
	left:auto;
	margin-top:auto;
	margin-left:auto;
	border: solid 1px #000000;
}

#one {
	text-align:center;
}
button {
	width:auto;
	
}
#first {
	background:url(../../../buttons/first.png)
}
#previous {
	background:url(../../../buttons/previous.png)
}
#next {
	background:url(../../../buttons/next.png)
}
#last {
	background:url(../../../buttons/last.png)
}
/*]]*/
</style>



my image sizes that are displayed are either 300x200px or 200x300px.

my question is this, can i get the images to be displayed at their original sizes, rather than being stretched to fill the 300x300 box that is used to display the images.

thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: html/css/javascript - image display

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3512
  • View blog
  • Posts: 10,137
  • Joined: 08-June 10

Re: html/css/javascript - image display

Posted 26 June 2013 - 07:07 AM

donít let the images inherit the width/height. if not given (though bad practice) the image will use the width/height from the image file.

PS. CDATA tags are only requires in XHTML, but XHTML must be served explicitly (either by extension (.xhtml) or by MIME type (application/xhtml+xml), the <meta> tag does NOT count) to be considered XHTML.

PPS. JS line #45, improper assignment. the function will be executed immediately, not on load.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3320
  • View blog
  • Posts: 11,229
  • Joined: 12-December 12

Re: html/css/javascript - image display

Posted 26 June 2013 - 07:20 AM

Curious if condition here:

function first(){
    if ((i!==0)||(i==0)) {
        i=0;
        document.getElementById("pictures").src = image[i]
    }

This says if i is not identical to 0, or it is equal (but not necessarily identical) to 0.. . Bit of a mind-bomb :dontgetit:. Anyway, it is not necessary; just

function first() {
    i = 0;
    document.getElementById("pictures").src = image[i];
}

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3512
  • View blog
  • Posts: 10,137
  • Joined: 08-June 10

Re: html/css/javascript - image display

Posted 26 June 2013 - 07:24 AM

I had mention that in the last thread, too. seems not to be of importance.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3320
  • View blog
  • Posts: 11,229
  • Joined: 12-December 12

Re: html/css/javascript - image display

Posted 26 June 2013 - 07:29 AM

You've spelt bacground wrong (near the top).

BTW The default values for left and top are auto. This is not the same for every property. For example, margins default to 0. I mention this as it is useful to be aware of the defaults: it can reduce the size of your css and gives you a better understanding of how css works.

Andy.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1