Displaying thumbnails and pictures in a slideshow kind off way

The_Dude_1978 · October 4, 2010

Hi,

You may noticed that i've posted before and closed them. It was too hard. I've been searching around for something else and i found it. But it's not quite perfect.

What i want to do is make thumbnails smaller (i can do that on my own) but displaying the bigger picture above the thumbnails. And aligning the thumbnails next to each other. So how do i do that?

The current code:

<?php

$result = mysql_query("SELECT reference FROM user_photos WHERE`profile_id`='".$row['id']."'");

while ($row2 = mysql_fetch_array($result, MYSQL_ASSOC))
{
	echo "<a href=\"".$_GET['username']."/pics/".$row2['reference']."\">
	<img src=\"".$_GET['username']."/pics/thumbs/".$row2['reference']."\"></a><br/><br/>";

}
}
?>

The files are refering to the mysql in reference but are actually in a subfolder with the username on the server.

I hope somebody wants to help me,

Best regards,

Martijn (the netherlands)

[attachment deleted by admin]

play_ · October 4, 2010

So you want to display them next to each other instead of on top of each other?

litebearer · October 5, 2010

perhaps 2 divs - upper div contains full image lower div scrolls left and right and contains thumbs horizontally. thumbs are 'clickable' and use ajax to switch content of upper div. Is that what you want?

The_Dude_1978 · October 5, 2010

Yes, that could solve it. The problem now is that a picture is clickable and opens a new page. You have to go back to get show the other picture and then hit the back button again to show the next image. It's inconvenient.

But can you place div's in php code? So how do you do that? And what jquery code does that?

Best regards,

Martijn

The_Dude_1978 · October 5, 2010

Ok,

I did some research and came up with this: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

So i got the basics working in a seperate html file. All seems fine.

But now i'm trying to implement it with the existing profile.php page. No luck.

The original code for the links look like:

<ul>

</ul>

</div>

And i want to use my code, which partly does the job, meaning it only shows one image, nothing more, while there are 3 images in that folder.

So how do you convert the code to show all images?

This is the code it originally uses:

<?php

$result = mysql_query("SELECT reference FROM user_photos WHERE`profile_id`='".$row['id']."'");

while ($row2 = mysql_fetch_array($result, MYSQL_ASSOC))
{
	echo "<a href=\"".$_GET['username']."/pics/".$row2['reference']."\">
	<img src=\"".$_GET['username']."/pics/thumbs/".$row2['reference']."\"></a><br/><br/>";

}
}
?>

And here is what i've done so far:

<?php
session_start();
include "db_connect.php";

$sql="SELECT * from `users` WHERE `username`='".$_GET['username']."'";
$res=mysql_query($sql) or die(mysql_error());

if(mysql_num_rows($res) != 1)
{
echo "<script language=\"Javascript\" type=\"text/javascript\">
alert(\"This user does not exist\")
document.location.href='index.php'</script>";
}
else
{
$row=mysql_fetch_assoc($res);

?>
<html>
<head><link rel="stylesheet" href="style.css"></head>
<link href="slideviewer.css" rel="stylesheet" type="text/css">
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.2.js" type="text/javascript"></script>
<script src="jquery.slideviewer.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind("load", function() {
$("div#mygalone").slideView({toolTip: true, ttOpacity: 0.5}) // ttOpacity can be 0.1 to 1.0
});
</script>

<div class="divider">
<h3>Fotograaf-Natalie.nl</h3>
<strong>Klantnummer: <?php echo $_SESSION['username'] ; ?></strong><br/>
Naam: <?php echo $row['first']. " " .$row['last'] ?> <br/>
E-mail: <?php echo $row['email'] ?> <br/>
Informatie: <?php echo $row['about'] ?> <br/>
    </div>

<div class="divider">
<strong>Pictures</strong><br/><br/>
<div id="mygalone" class="svw">
<ul>
	<li>
<?php

$result = mysql_query("SELECT reference FROM user_photos WHERE`profile_id`='".$row['id']."'");

while ($row2 = mysql_fetch_array($result, MYSQL_ASSOC))
{
	echo "<a href=\"".$_GET['username']."/pics/".$row2['reference']."\">
	<img src=\"".$_GET['username']."/pics/thumbs/".$row2['reference']."\"></a><br/><br/>";

}
}
?></li>
</div>
</div>
</body>
</html>

So how to adjust the code for showing / listing all images?

Best regards,

Martijn (the netherlands)

[attachment deleted by admin]

The_Dude_1978 · October 5, 2010

I've done some searching and comparing different codes. I'm thinking that i need to use a foreach( statement or so.

Another document i saw had the following code, but i'm not sure how to implement that:

<?php if (count($images) == 0) { ?>
                    <li>No uploaded images found</li>
                <?php } else foreach ($images as $id => $filename) { ?>
                    <li>
                        <a href="view.php?id=<?php echo $id ?>">
                            <?php echo htmlSpecialChars($filename)  ?>
                        </a>
                    </li>

Without the a href view.php ofcourse.

Somebody now a little more allready?

Thanks

The_Dude_1978 · October 5, 2010

Marking as solved, because the title does not reflect my question anymore and i feel that no one is watching this thread because of that.

Sorry

Sign In

Displaying thumbnails and pictures in a slideshow kind off way

Recommended Posts

The_Dude_1978

Link to comment

Share on other sites

play_

Link to comment

Share on other sites

litebearer

Link to comment

Share on other sites

The_Dude_1978

Link to comment

Share on other sites

The_Dude_1978

Link to comment

Share on other sites

The_Dude_1978

Link to comment

Share on other sites

The_Dude_1978

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information