web gallery questions

Slapshot136

Divide et impera
Reaction score
471
so I am making a web gallery and I have run into some questions

first, this is what I want it to look like

galleryExample.png


first, I need to make a horizontal scroll bar, as I have a lot of pictures
second, how can I get the options menu to limit which pictures are displayed in the thumbnail box? (each image can have multiple "attributes", so something like a picture could be both under "flowers" and "march", but I only want it saved on the server once)

I am currently using javascript and it is working except for the above 2 issues, so I would prefer not to completely change to flash

the images are tagged like image(1)_march_flower_2010_etc_size, and I was hoping to be able to use their file name for the "options" menu
 

GetTriggerUnit-

DogEntrepreneur
Reaction score
129
If I were you, I would build a PHP/AJAX system and store each photo information in a database.

1. Make a div with an auto overflow and make it like 90% of your page's width. Then bind the options checkbox/button to a click event. When the event is triggered, you load all your pictures path using ajax.

This, for instance, can load a bunch of strings separated by a ";".
Code:
function getPicturesPath(attributes, fn) {
    var xhr = null;
    if (window.XMLHttpRequest)
        xhr = new window.XMLHttpRequest();
    else {
        try {
            xhr = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
    }
    xhr.open('GET', 'ajax.php?attr=' + attributes, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200)
            fn(xhr.reponseText.split(';'));
    };
    xhr.send();
}

2. Let's say that every picture has it's own relative information stored in a database.
Lets say you have a table with 4 columns

INT(11) id (UNIQUE, AUTO_INCREMENT) | VARCHAR(200) name | VARCHAR(200) path | VARCHAR(200) attributes

Then you just do a mysql_query using the like keyword and you echo the results separated by a semicolon.
 

Slapshot136

Divide et impera
Reaction score
471
how would I get all the pictures to load initially (well not really load, but occupy horizontal space, such as the user can gauge how many pictures there are by the size of the scroll bar, yet only have the "visible" ones (currently scrolled ones) really loaded (or atleast delay the loading of the others for a while)
 

GetTriggerUnit-

DogEntrepreneur
Reaction score
129
That seems like a really hard task. In my opinion, you should load them progressively. Start loading by the left of the bar and then load it all.
As long as you don't have 200 images I think it's a viable solution.

Also, to reduce the loading time, you could reduce your thumbnails size (if it's not done already). You could do it manually (long task) or do it with PHP. Like thumbnail.php?imageid=1 (reference to database) and this page would return image/png; your image. You simply use GD to cut the image off.

Of course, you could start playing with X/Y and the screen's width but I really don't recommend it as it would be a pain in the a*s.
 

Slapshot136

Divide et impera
Reaction score
471
I had a photoshop make a nice small thumbnail for everything already..

I can't seem to get the horizontal scroll bar working, what code am I supposed to use for it?
 

UndeadDragon

Super Moderator
Reaction score
448
Overflow: Scroll?
 

Slapshot136

Divide et impera
Reaction score
471
yea.. that's what I tried?

PHP:
<!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>horizontal test</title>	
	</head>
	<body>
		<div style="width: 800px; height: 200px; background-color: #333333; overflow-x: scroll;
	overflow-y: hidden;	-ms-overflow-y: hidden;">
			<div style="width: 150px; height: 150px; margin: 25px; background-color: #FF0000; float: left; ">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #00FFFF; float: left;">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #00FF00; float: left;">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #FF00FF; float: left;">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #0000FF; float: left;">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #999999; float: left;">
				<br /><br /><br /><br /><br /><br />
			</div>
		</div>
	</body>
</html>

basically I should be getting 6 boxes and a scroll bar.. I get 4 and a disabled scroll bar

(please excuse the in-line CSS)
 

Artificial

Without Intelligence
Reaction score
326
Using float doesn't make the elements go beyond the parent's width, which is why the x scrollbar is disabled. If you wouldn't have had overflow-y: hidden; you would've seen a y scrollbar there, using which you could've seen the rest of the divs.

Instead of using float, I think you should use white-space: nowrap. It prevents the elements from wrapping to another line when the horizontal space in the parent is used on that line.

Here's an example:
PHP:
<div style="width: 800px; height: 200px; background-color: #666666; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;">
    <img width="150px" height="150px" src="http://www.thehelper.net/forums/customavatars/avatar9915_3.gif">
    <img width="150px" height="150px" src="http://www.thehelper.net/forums/customavatars/avatar9915_3.gif">
    <img width="150px" height="150px" src="http://www.thehelper.net/forums/customavatars/avatar9915_3.gif">
    <img width="150px" height="150px" src="http://www.thehelper.net/forums/customavatars/avatar9915_3.gif">
    <img width="150px" height="150px" src="http://www.thehelper.net/forums/customavatars/avatar9915_3.gif">
    <img width="150px" height="150px" src="http://www.thehelper.net/forums/customavatars/avatar9915_3.gif">
</div>
 

Slapshot136

Divide et impera
Reaction score
471
so.. with no floats but with whitespace: nowrap, I only get 1 box..

PHP:
<!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>horizontal test</title>	
	</head>
	<body>
		<div style="width: 800px; height: 200px; background-color: #333333; overflow-x: scroll;
	overflow-y: hidden;	-ms-overflow-y: hidden;">
			<div style="width: 150px; height: 150px; margin: 25px; background-color: #FF0000; white-space: nowrap; ">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #00FFFF; white-space: nowrap;">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #00FF00; white-space: nowrap;">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #FF00FF; white-space: nowrap;">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #0000FF; white-space: nowrap;">
				<br /><br /><br /><br /><br /><br />
			</div>
						<div style="width: 150px; height: 150px; margin: 25px; background-color: #999999; white-space: nowrap;">
				<br /><br /><br /><br /><br /><br />
			</div>
		</div>
	</body>
</html>

http://dl.dropbox.com/u/1615395/test.html
 

Artificial

Without Intelligence
Reaction score
326
Divs have a default of display: block, which means they will not be displayed on the same line (meaning the 5 missing divs are below the first one). You can either specify display: inline in the contained divs' styles or go straight for an inline element like img. Additionally, the white-space: nowrap styling was supposed to go into the containing div, not the contained divs.
 

Slapshot136

Divide et impera
Reaction score
471
so.. like this? (i lost all the boxes now..)

PHP:
<!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>horizontal test</title>	
	</head>
	<body>
		<div style="width: 800px; height: 200px; background-color: #333333; overflow-x: scroll;
	overflow-y: hidden;	-ms-overflow-y: hidden; white-space: nowrap;">
			<div style="width: 150px; height: 150px; margin: 25px; background-color: #FF0000; display: inline;">
				<br /><br /><br /><br /><br /><br />

			</div>
			<div style="width: 150px; height: 150px; margin: 25px; background-color: #00FFFF; display: inline;">
				<br /><br /><br /><br /><br /><br />
			</div>
			<div style="width: 150px; height: 150px; margin: 25px; background-color: #00FF00; display: inline;">
				<br /><br /><br /><br /><br /><br />
			</div>
			<div style="width: 150px; height: 150px; margin: 25px; background-color: #FF00FF; display: inline;">
				<br /><br /><br /><br /><br /><br />

			</div>
			<div style="width: 150px; height: 150px; margin: 25px; background-color: #0000FF; display: inline;">
				<br /><br /><br /><br /><br /><br />
			</div>
			<div style="width: 150px; height: 150px; margin: 25px; background-color: #999999; display: inline;">
				<br /><br /><br /><br /><br /><br />
			</div>
		</div>
	</body>

</html>

and this is a test page, in my actual one they are images..
 

Artificial

Without Intelligence
Reaction score
326
> in my actual one they are images..
I think it's kinda silly to test it with other elements than the ones you'll actually use, as different elements behave completely differently.

Anyway, I should've said "display: inline-block" instead of "display: inline".
 

Slapshot136

Divide et impera
Reaction score
471
ok, I got the horizontal scroll working

now, I have another question:

PHP:
<a href="images/gallery/2011/april/april_2011_1_fullsize.jpg" title="Picture 1"><img class="gallery_thumb" src="images/gallery/2011/april/april_2011_1_thumbnail.jpg"/></a>

is there any way that inside that title tag, I can put a link? I tested and I can put in basic HTML (like <b> text </b> and it works, but if I try to do a href=", the " closes it and it ignores the rest - is there like a \" or something that I can use to ignore " as a "close" and just accept it as a char?
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top