PDA

View Full Version : Horizontal Scroll Gallery


louis bloomfield
07-21-2011, 01:57 PM
Hi Forum People.

My dilemma, I thought this would be an easy task for me.

But I am struggling like crazy, i have searched forums and the google machine, and found close to, but not what I need. Maybe my terminology is not right, so i apologise if I have repeated a thread.

Basically... An example of what I want is below:

http://www.magnusarrevad.com/pictet/

Its the Scrolling image gallery that I require. I figure out how horizontal overflow is coded, vertical is okay, but that doesn't fit the aspects of the content that I want to apply.

Any help would be appreciated.

Cheeers

x

domedia
07-21-2011, 02:34 PM
All the code is right there, it's an iframe.
Using CSS overflow would be better, I agree.

Can you be specific as to what you need help with?

.

louis bloomfield
07-21-2011, 07:25 PM
Thanks for the reply,

I have my images, all ready to go.

My desire is to have all the images next to each other stacking from left to right. My website is 800px wide, this is the size of the desired scroll box.

If i put all the images together in P.S and make one long image i can do it fine, but I need the images to be put in separately and sit next to each other horizontally. When i try this the overflow doesn't work and it creates a scroll bar at the bottom of the screen instead of in the website frame itself, when scrolled it moves the navigation bar out of the screen.

I need the images placed next to each other in a 800px wide box with horizontal scroll.

domedia
07-21-2011, 07:31 PM
When i try this the overflow doesn't work and it creates a scroll bar at the bottom of the screen instead of in the website frame itself, when scrolled it moves the navigation bar out of the screen.
So I think you're choosing the right approach. It's the implementation there's something wrong with. The scroll bar would not be in the whole browser window if it was done right.

It's going to be complete guesswork at this point. Can you put your complete page so far somewhere temporary on the web? It might just be a quick change.

louis bloomfield
07-21-2011, 07:36 PM
Cool, done that...

http://www.louisbloomfield.com/tempory_horizontal.html

This is exactly the way i want it, but as you can see that the images have had to be made into one bulk image in order for for the overflow to work.

thanks

louis bloomfield
07-21-2011, 07:40 PM
<!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>temp</title>
<style type="text/css">
body {
background-color: #FFF;
width: 800px;
margin-right: auto;
margin-left: auto;
}
.linkstyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-decoration: none;
}
.linkstyle a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-decoration: none;
}
.linkstyle a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-decoration: none;
}
.linkstyle a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #00F;
text-decoration: none;
}
.linkstyle a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-decoration: none;
}
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('')">
<div id="wrapper">
<div id="logo"><a href="index.html"><img src="images/logo.jpg" alt="logo" width="243" height="35" id="logo" /></a></div>
<div id="copyright">All Images Louis Bloomfield Photography 2011</div>
<div id="navigation">
<p class="linkstyle"><a href="everyday.html">Everyday</a> • <a href="work.html">Work</a> • <a href="clients.html">Clients</a> • <a href="about.html">About</a> • <a href="http://louisbloomfield.wordpress.com">Blog</a> • <a href="contact.html">Contact</a></p>
</div>
</div>
<div id="table_horz"><img src="images/scroll_practise/Untitled-1.jpg" width="1350" height="300" /></div>

</body>
</html>

domedia
07-21-2011, 07:58 PM
Cool, done that...

http://www.louisbloomfield.com/tempory_horizontal.html

This is exactly the way i want it, but as you can see that the images have had to be made into one bulk image in order for for the overflow to work.

thanks

There's really no reason why you should have them in one large image.
If you can put a temporary page up with your attempt to put in the images individually, someone will be able to tell you what's missing.

Basically:
<div id="images">
<img>
<img>
<img>
</div>

#images {
width: 200px;
height: 100px;
overflow: auto;
}
#images img {
float: left;
}

louis bloomfield
07-21-2011, 08:23 PM
So ive tried the above code, changed css etc...
and uploaded it to the same page below:

http://www.louisbloomfield.com/tempory_horizontal.html


CSS:
}
#table_horz {
width: 800px;
height: 320px;
overflow: auto;
}
#table_horz img {
float: left;
}


Code:
<div id="table_horz">
<img src="images/scroll_practise/_MG_1307.jpg" width="450" height="300" />
<img src="images/scroll_practise/_MG_1370.jpg" width="450" height="300" />
<img src="images/scroll_practise/_MG_1489.jpg" width="450" height="300" />
</div>

louis bloomfield
07-21-2011, 08:30 PM
I just changed the code too:

}
#table_horz {
width: 1500px;
height: 320px;
overflow: auto;
}
#table_horz img {
float: left;
}

domedia
07-21-2011, 08:33 PM
You #table_horz set to 1500px wide.

I also missed one containing div, so replace your code with this:
<div id="table_horz">
<i>
<img src="images/scroll_practise/_MG_1307.jpg" width="450" height="300" />
<img src="images/scroll_practise/_MG_1370.jpg" width="450" height="300" />
<img src="images/scroll_practise/_MG_1489.jpg" width="450" height="300" />
</i>
</div>

And then change change this CSS rule #table_horz to this:

#table_horz {
width: 450px;
height: 320px;
overflow: auto;
}

And add one more
#table_horz i {
display: block;
width: 1500px;
height: 320px;
}

Off Topic: the shop owner series was really cool. Make a ton and do an exhibition :-)

.

louis bloomfield
07-21-2011, 08:45 PM
Awesome...

It has worked, thankyou mate.

www.louisbloomfield.com/tempory_horizontal.html

Shows it working, i just had to change a few things.

#table_horz {
width: 800px;
height: 335px;
overflow: auto;
}
#table_horz img {
float: left;
}
#table_horz i {
display: block;
width: 1500px;
height: 320px;
}


I shall post the full page when it is completed!...

Thankyou for your shopkeeper comments, it is something i aim to persue!

domedia
07-21-2011, 09:01 PM
Cool,
If you change '#table_horz i' from 320px tall to 310px tall, the vertical scrollbar will go away.

Keep us posted on the progress.

.