Image display in a div reading image filename from database

colap · January 10, 2011

Hello,

Five images will be displayed inside a division.

There will be a previous and next button/link.

If someone click the next button the next image will be added in that div and the first image will be gone from that div.

The previous button/link will do the same thing.

Is it possible with php?

I am confused if it's a javascript or ajax question.

Thanks.

AJayUK · January 10, 2011

It sounds like you need a simple slideshow. What you are trying to achieved could be done using php, in fact it can be achieved using html or even pure css. However if your after some type of slideshow and you dont sound too familiar with either javascript or ajax, i recommend you try installing a simple jquery slideshow.

Sorry if i sound like ive lost you already but have a look at "Sexy Slider".

http://s3.envato.com/files/351371/index.html

It's easy to install, easy to modify and sounds like it does what you need!

You also mentioned retrieving images from a database using php, i would get the slideshow up and running first, then using php you can retrieve the image filenames from the database, so yes you would be using both php and javascript to create this!

colap · January 10, 2011

The link you gave is not readable.

The images below the page is not readable.

AJayUK · January 11, 2011

Hi, your right, they really need to fix that up.

Try this one...

http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

However if you just google "JQuery Slideshows" you can find more advanced slideshows but the link above is for a basic slideshow with next and previous buttons.

QuickOldCar · January 11, 2011

For sexy slider it's because is now a pay for script.

http://codecanyon.net/item/sexy-slider/87148

$7.00 or $35.00 for extended license

litebearer · January 11, 2011

A very rough idea...

(working example = http://wljol.com/testarea1/ )

<?PHP
session_start();
include ('db.php'); /* MODIFY TO FIT YOUR CONNECTION INFO */
$query = "SELECT * FROM images"; /* MODIFY TO REFLECT YOUR DATABASE TABLE */
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
$image_array[] = $row['image'];  /* MODIFY TO REFLECT YOUR FIELD NAME */
}
$num_images_to_display = 1; /* MODIFY TO REFLECT NUMBER OF IMAGES TO SHOW PER SCREEN */
$num_images = count($image_array);
$image_path = "images/"; /* MODIFY TO REFLECT THE PATH TO YOUR IMAGES */
$y = $num_images_to_display;
if(!isset($_GET['first'])){
	$first = 0;
}else{
	$first = (int) $_GET['first'];
}
$x = $num_images - 1;
$z = $x - $y;
if($first>$z) {
$first = $z;
}
$last = $first + $num_images_to_display;
?>
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<div style="position:absolute; top:50px; left:100px; width:800px; text-align: center;">
<?PHP
$i = $first;
while($i<$last) { $showme = $image_path . $image_array[$i]; ?><img src="<?PHP echo $showme; ?>"><?PHP $i++; }
$prev = $first-1;
$next = $first +1;
if($prev<0){ $prev = 0; }
?>
</div>
<div style="position:absolute; top:10px; left:100px; width:800px;">
<center><a href="index.php?first=<?PHP echo $prev; ?>">Previous</a>     -      <a href="index.php?first=<?PHP echo $next; ?>">Next</a></center>

</div>

</body>
</html>

ins-coder · June 2, 2012

A very rough idea...

(working example = http://wljol.com/testarea1/ )

<?PHP
session_start();
include ('db.php'); /* MODIFY TO FIT YOUR CONNECTION INFO */
$query = "SELECT * FROM images"; /* MODIFY TO REFLECT YOUR DATABASE TABLE */
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
$image_array[] = $row['image'];  /* MODIFY TO REFLECT YOUR FIELD NAME */
}
$num_images_to_display = 1; /* MODIFY TO REFLECT NUMBER OF IMAGES TO SHOW PER SCREEN */
$num_images = count($image_array);
$image_path = "images/"; /* MODIFY TO REFLECT THE PATH TO YOUR IMAGES */
$y = $num_images_to_display;
if(!isset($_GET['first'])){
	$first = 0;
}else{
	$first = (int) $_GET['first'];
}
$x = $num_images - 1;
$z = $x - $y;
if($first>$z) {
$first = $z;
}
$last = $first + $num_images_to_display;
?>
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<div style="position:absolute; top:50px; left:100px; width:800px; text-align: center;">
<?PHP
$i = $first;
while($i<$last) { $showme = $image_path . $image_array[$i]; ?><img src="<?PHP echo $showme; ?>"><?PHP $i++; }
$prev = $first-1;
$next = $first +1;
if($prev<0){ $prev = 0; }
?>
</div>
<div style="position:absolute; top:10px; left:100px; width:800px;">
<center><a href="index.php?first=<?PHP echo $prev; ?>">Previous</a>     -      <a href="index.php?first=<?PHP echo $next; ?>">Next</a></center>

</div>

</body>
</html>

Thanks for this but when I use this, it does not show the last and shows second last record two times. I have not change any thing in the loop, just changed line according to the comments. i.e db file, query etc

please help or suggest any thing better than for this same procedure.

litebearer · June 2, 2012

Strange, the demo works fine. Please show us your code.

ins-coder · June 2, 2012

Strange, the demo works fine. Please show us your code.

Thanks, here is my code

<?PHP
session_start();
include ('includes/db.php'); /* MODIFY TO FIT YOUR CONNECTION INFO */
$query = "SELECT * FROM vote_frames WHERE pshow='1'"; /* MODIFY TO REFLECT YOUR DATABASE TABLE */
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
$image_array[] = $row['frame_pic'];  /* MODIFY TO REFLECT YOUR FIELD NAME */
$image_array1[] = $row['frame_pic1'];  /* MODIFY TO REFLECT YOUR FIELD NAME */
$image_array2[] = $row['frame_pic2'];  /* MODIFY TO REFLECT YOUR FIELD NAME */
}
$num_images_to_display = 1; /* MODIFY TO REFLECT NUMBER OF IMAGES TO SHOW PER SCREEN */
$num_images = count($image_array);
$image_path = "../frame_images/"; /* MODIFY TO REFLECT THE PATH TO YOUR IMAGES */
$y = $num_images_to_display;
if(!isset($_GET['first'])){
	$first = 0;
}else{
	$first = (int) $_GET['first'];
}
$x = $num_images - 1;
$z = $x - $y;
if($first>$z) {
$first = $z;
}
$last = $first + $num_images_to_display;
?>
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<div style="position:absolute; top:50px; left:100px; width:800px; text-align: center;">
<?PHP
$i = $first;
while($i<$last) { $showme = $image_path . $image_array[$i]; $showme1 = $image_path . $image_array1[$i]; $showme2 = $image_path . $image_array2[$i]; ?>

<img src="<?PHP echo $showme; ?>" width="176px" height="197px">

<?php if($image_array1[$i]!="") { ?><img src="<?PHP echo $showme1; ?>" width="176px" height="197px"><?php } else { ?><img src="../image/no_image.jpg" width="176px" height="197px"><?PHP } ?>

<?php if($image_array2[$i]!="") { ?><img src="<?PHP echo $showme2; ?>" width="176px" height="197px"><?php } else { ?><img src="../image/no_image.jpg" width="176px" height="197px"><?PHP } $i++; }

$prev = $first-1;
$next = $first +1;
if($prev<0){ $prev = 0; }
?>
</div>
<div style="position:absolute; top:10px; left:100px; width:800px;">
<center><a href="imgal.php?first=<?PHP echo $prev; ?>">Previous</a>     -      <a href="imgal.php?first=<?PHP echo $next; ?>">Next</a></center>

</div>

</body>
</html>

Although I am showing three images because the other two are sub images of the same record, but I have tried using only one and it does the same thing as well.

ins-coder · June 2, 2012

Strange, the demo works fine. Please show us your code.

You can check the code at the website with out any change other than connectivity and table names etc.

Basically current displaying image shows "its actual id+1" like if an image has an id of 5, there it will have 6 so second last is having id of the last one, so its skipping. Any one please check it.

ins-coder · June 2, 2012

please help

Sign In

Image display in a div reading image filename from database

Recommended Posts

colap

Link to comment

Share on other sites

AJayUK

Link to comment

Share on other sites

colap

Link to comment

Share on other sites

AJayUK

Link to comment

Share on other sites

QuickOldCar

Link to comment

Share on other sites

litebearer

Link to comment

Share on other sites

ins-coder

Link to comment

Share on other sites

litebearer

Link to comment

Share on other sites

ins-coder

Link to comment

Share on other sites

ins-coder

Link to comment

Share on other sites

ins-coder

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information