Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need to create thumbs gallery

Status
Not open for further replies.
Saiman70

Saiman70

Technical User
Mar 5, 2009
10
IT
Hello EB

I have an issue : In my photo website I have created a gallery where I can scroll back or forward my pics and view all the albums, but scrolling the pics already big size.
I want to add a div to put on the left handside of the page, where I wish to view all the related thumbs of the gallery
I created on my server website 2 folder. (bigger size, viewable on the page, and the bigger size viewble clicking the link, blow-up the image.
Now I am going to create the 3rd folder where I create automatically the thumbs whjere will be stored them.
With a script php I take the data from the mysql and print the images on the screen.
For the gallery of the normal size pics, I create a mix between php and javascriptt
see this please

On the left as I told before i want to put the gallery thumbs so the people can choose the pics they want and view the related image, that will change in the middle of the screen

How could i do? any suggestions?the difference between the other script is that all the thumbs are viewed together , not like the image in the center, that change. SO I must keep inmind this.
Sorry. i don't know how to print the thumbs on the screen and to link them to every related image in the middle.


<script type="text/javascript" language="JavaScript">
var photos=new Array()
var text=new Array()
var link=new Array()

var which=0

<?php

$host = "x";
$user = "Sx";
$password = "x";
$dbname = "x";
//CREO LA VARIABILE CHE CONNETTE IL SERVER AL DATABASE
$cxn = mysql_connect($host,$user,$password);
mysql_select_db($dbname);
$item=0;
//CONTROLLO CONNESSIONE SE è OK
if (!$cxn)
{
echo 'Errore durante la connessione al server MySQL';

exit();

}
else {


$sql = "SELECT * FROM bn ORDER BY descrizione";
$result = mysql_query ($sql);

while ($row = mysql_fetch_row($result))
{
if ( $item == 0 ) { $_primafoto = $row[0]; }
if ( $item == 0 ) { $_primolink = "<a target='blank' href='[0].".jpg'>Ingrandisci l'immagine - Bigger size </a>";}
if ( $item == 0 ) { $_firstext = $row[1]; }
echo "photos[".$item."]=\"bn/".$row[0].".jpg\";";

echo "text[".$item."]=\"".$row[1]."\";";
echo "link[".$item."]=\"<a target='blank' href='[0].".jpg'>Ingrandisci l'immagine - Bigger size </a>\";";
$item=$item+1;
}
}
?>

function arrow()
{

document.getElementById( "back2" ).style.display = "none";

}

function changePic(dir) {
var testo = document.getElementById( 'testo' );
var collegamento = document.getElementById( 'collegamento' );

var image = document.images.photoslider,

fwdBtn = document.getElementById('forward2'),
backBtn = document.getElementById('back2'),
n = photos.length-1;
if (dir == "next") {
which = (which < n) ? which + 1 : which;
image.src = photos[which];
testo.innerHTML = text[ which ];
collegamento.innerHTML = link[ which ];
backBtn.style.display = "inline";
if (which == n) {
fwdBtn.style.display = "none";
}
} else if (dir == "back") {
which = (which > 0) ? which - 1 : which;
image.src = photos[which];
testo.innerHTML = text[ which ];
collegamento.innerHTML = link[ which ];
fwdBtn.style.display = "inline";
if (which === 0) {
backBtn.style.display = "none";
}

}
return false;
}


</script>

</head>

<body OnLoad="arrow()">

<div class="container2">
<div id="logo" > </div>

<div class="menu">


<a href=" </a>
<a href=" sono </a>
<a href=" </a>
<a href=" </a>
<a href=" </a>
<a href=" </a>
</div>

<div id="backbn">




</div>

<div id='iconesx' name="thumb">
THUMBS (HERE I WISH TO VIEW THE THUMBS!

</div>
<div class="gruppofoto2"><a href="gallerymacro.php">Macro</a><a href="gallerypaesaggi.php">Paesaggi</a><a href="galleryritratti.php">Ritratti</a><a href="gallerybn.php">Urbana e Street</a><a href="gallerynotturna.php">Notturna</a><a href="galleryanimali.php">Natura e Animali</a><a href="galleryvarie.php">Varie</a><img src="bn/<?php echo $_primafoto; ?>" name="photoslider">

<div id='testo'><?php echo $_firstext; ?></div>
<div id='collegamento'><?php echo $_primolink; ?></div>

</div>
<div class="scorri">
<a href="#" onclick="return changePic('back');"><img id="back2" style="border:0px" src="indietro.jpg"></a>
<a href="#" onclick="return changePic('next');"> <img id="forward2" style="border:0px" src="avanti.jpg"></a>
</div>
<div class="inizio"><a href="#" onclick="which=1; changePic('back');return false" >Inizio - Start</a>
</div>
<div id="footer">Created by Paolo Bergomi</div>
</div>


</body>

</html>



THIS IS THE DIV FOR THE THUMBS

<div id='iconesx' name="thumb">
THUMBS (HERE I WISH TO VIEW THE THUMBS!

</div>


Thanks a lot for everybody 's attention

paolo ;)
 
Sort by date Sort by votes
for each photo i upload i would create a thumbnail version and a medium sized version, using a defined folder storage strategy.

i would display the thumbnails in a scrolling div.

when a user clicks on a thumbnail i'd use a tiny bit of javascript to change the link href and the img src attribute of the main image. just because it's easier on the brain cells i'd use jQuery to do this. because you have used a known folder storage strategy such as this:
Code: 
images
  ---->  full
  ---->  thumbnails
  ---->  medium

you do not need to write all the different permutations of paths to the js. just use something like this
Code: 
jQuery('.thumbnail').bind('click', function(){
	//get target src
	var s = jQuery(e.target).attr('src');
	//get medium src
	var m = s.replace(/thumbnail\//,'medium/');
	//get full src
	var f = s.replace(/thumbnail\//,'full/');
	
	jQuery('#imageDiv a').attr('href', f);
	jQuery('#imageDiv img').attr('src', m);
});


assuming that your html page looks something like this
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Thumbnails</title>
		<style type="text/css">
			#thumbnails{
				width: 80px;
				background-color:black;
				text-align:center;
				float:left;
			}
			#thumbnails img{
				border: 1px white outset;
				padding: 2px;
				margin: 4px 0;
			}
			#contentDiv{
				float:left;
			}
			#imageDiv{
				width:80%;
				margin: 0 auto;
				text-align:center;
			}
			#imageDiv img{
				border:none;
				padding:0;
				margin:0;
			}
		</style>
	</head>
	<body>
		<div id="thumbnails">
			<img src="images/thumbnails/1.jpg" class="thumbNails" /><br/>
			<img src="images/thumbnails/2.jpg" class="thumbNails" /><br/>
			<img src="images/thumbnails/3.jpg" class="thumbNails" /><br/>
			<img src="images/thumbnails/4.jpg" class="thumbNails" /><br/>
			<img src="images/thumbnails/5.jpg" class="thumbNails" /><br/>
			<img src="images/thumbnails/6.jpg" class="thumbNails" /><br/>
			<img src="images/thumbnails/7.jpg" class="thumbNails" />
		</div>
		<div id="contentDiv">
			<div id="imageDiv">
				<a href=""><img src="" class="medium" /></a>
			</div>
		</div>
	</body>
</html>
 
Upvote 0 Downvote
oops. js should have been
Code: 
jQuery('.thumbnail').bind('click', function(){
    //get target src
    var s = jQuery(e.target).attr('src');
    //get medium src
    var m = s.replace(/thumbnail[red]s[/red]\//,'medium/');
    //get full src
    var f = s.replace(/thumbnail[red]s[/red]\//,'full/');
    
    jQuery('#imageDiv a').attr('href', f);
    jQuery('#imageDiv img').attr('src', m);
});
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

P
  • Locked
  • Question
JPgraph - How to stop a line graph from dropping to zero?
Replies
2
Views
248
Chris Miller
Chris Miller
EdLentz
  • Locked
  • Question
I need a simple example of how to send a table of info .
Replies
8
Views
280
EdLentz
EdLentz
rogerte
  • Locked
  • Question
How to parse associative array
Replies
13
Views
641
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question
Basic Authentication fails to authenicate
Replies
0
Views
120
PeDa
PeDa
ersatz
  • Locked
  • Question
How to send 2 select from mysql database in email like tables
Replies
5
Views
299
ersatz
ersatz

Part and Inventory Search

Sponsor

Back
Top