PDA

View Full Version : Horizontal image scrolling?

salvon72
Nov-06-2009, 08:41 PM
Hi,

I would really like to allow my visitors to scroll horizontally in the 'journal' style. not unlike this site:

http://jessechehak.com/portfolios/149-commissions

Is there a way to do this? I'd really appreciate any help with this :-)

thanks,

sergio

www.salvadorphoto.com
denisegoldberg
Nov-07-2009, 04:07 AM
The only way I'm aware of to do something like that (in smug) would be to build your own HTML-only pages to display your photos, stacking all of the <img src= statements in a single line. Or embedding them in a table with only a single row.

--- Denise
salvon72
Jan-28-2010, 09:10 PM
The only way I'm aware of to do something like that (in smug) would be to build your own HTML-only pages to display your photos, stacking all of the <img src= statements in a single line. Or embedding them in a table with only a single row.

--- Denise

I'm not sure what half those words mean. I think I'll just let that dream go for now. Thanks for getting back to me.
MakeMeShutter
Jan-29-2010, 10:19 AM
I believe this can be done using the following code.

The below code gets placed in the gallery description section of the page.


<html>
<center>
<div id="story">
<ul>
<li><img src="<A href="Your Image Address"></li>
<li><img src="<A href="Your Image Address"></li>
<li><img src="<A href="Your Image Address"></li>
<li><img src="<A href="Your Image Address"></li>
</ul>
</div>
</center>
</html>



The below code goes in your CSS section.


/*=============Story Page=====================*/
/*=============Horizontal Scroll==============*/
/*=============ShawnKrausPhoto.com============*/

#story {display: none}
.gallery_XXXXXX #story {display: block}
.gallery_XXXXXX .nophotos {display: none;}
.gallery_XXXXXX #breadCrumbTrail {display:none;}
.gallery_XXXXXX #journal {width:99%; margin: -35px auto 10px;}

#story {width:99%;height:auto;overflow:auto;}
#story {white-space:nowrap}
#story li {display:inline;list-style-type:none}
#story img {margin:-5px 7px; height:450px}





Replace "Your Image Address" with the actual image address.
Replace the "XXXXXX" with your gallery number.
Spacing and height can be adjusted with the last line.

Gallery should be HTML only set to (old Journal) style.

Images are not "Right Click" protected using this method.

I would advise against using horizontal scrolling on a web page. (just my opinion)