Jump to content

Image display in a div reading image filename from database


Recommended Posts

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.

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!

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.

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>

  • 1 year later...

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.

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.

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.