Jump to content

Slideshow style image display....


batstanggt

Recommended Posts

Your basically looking for a technique called pagination. We have a tutorial on our site that covers this subject.

 

http://www.phpfreaks.com/tutorial/basic-pagination

I think what he's talking about is the actual slideshow effect.  Where either the pictures move fluidly in a right-to-left motion or it moves upon a mouse event.

These types of UI can only be done with, yes, the cursed javascript.  Unless of course you make it in Flash or Java.

Link to comment
Share on other sites

Your basically looking for a technique called pagination. We have a tutorial on our site that covers this subject.

 

http://www.phpfreaks.com/tutorial/basic-pagination

I think what he's talking about is the actual slideshow effect.  Where either the pictures move fluidly in a right-to-left motion or it moves upon a mouse event.

These types of UI can only be done with, yes, the cursed javascript.  Unless of course you make it in Flash or Java.

the cursed Flash or Java...

Link to comment
Share on other sites

Your basically looking for a technique called pagination. We have a tutorial on our site that covers this subject.

 

http://www.phpfreaks.com/tutorial/basic-pagination

I think what he's talking about is the actual slideshow effect.  Where either the pictures move fluidly in a right-to-left motion or it moves upon a mouse event.

These types of UI can only be done with, yes, the cursed javascript.  Unless of course you make it in Flash or Java.

 

I really should stop assuming that everyone knows the difference between what is done server-side and what needs to be done client-side.

Link to comment
Share on other sites

OK so whats the verdict is it pagination? Or is it Javascript? I dont really want any swanky effects just the ability to click a left and right arrows underneath an image and then have the image be change obviously according to the clicks. However I do want to get the image from a database not just written into the code. The more i write/ read about it the more it seems like ill have to use a server side (php) and client side ( i guess javascript or jquery) script. Is this correct?

-SB 

Link to comment
Share on other sites

If the list of images you want is in a database then your definitely going to need to use a server side language such as php. Doing this in php lone means however that every click would refresh the entire page.

 

The other option is to use PHP combined with JavaScript to create an Ajax driven slideshow. For this, you have client side code that when a user clicks next makes a background request back to the server, php then looks up the next image and send this data back to JavaScript.

 

The other option of course is to simply dump all your data into a JavaScript array when the page is created (by PHP) and then use JavaScript to do the entire thing.

 

None of these options are particularly difficult if you know the technologies involved.

 

Link to comment
Share on other sites

If the list of images you want is in a database then your definitely going to need to use a server side language such as php. Doing this in php lone means however that every click would refresh the entire page.

 

The other option is to use PHP combined with JavaScript to create an Ajax driven slideshow. For this, you have client side code that when a user clicks next makes a background request back to the server, php then looks up the next image and send this data back to JavaScript.

 

The other option of course is to simply dump all your data into a JavaScript array when the page is created (by PHP) and then use JavaScript to do the entire thing.

 

None of these options are particularly difficult if you know the technologies involved.

 

Or you can use an IFrame to display the images... but I personally think IFrames suck.

Link to comment
Share on other sites

I dont yet have the table with the images in the database yet. But just so i know once I get to that point (BLOB or filename) which should I use or should i say how do i know when to use each? What is BLOB anyways Ive seen this term used quite frequently in my research.

-SB

Link to comment
Share on other sites

There are two commonly used ways you can store images in a database either using BLOB- having the actual binary file stored within the table, or  just having the filename of the image within the table(i.e. image123.jpg)

 

Storing a BLOB is quite a nuisance because it can take up lots of space in your database, is quite slow and is typically frowned upon by webhosting companies. However by storing the image filename in the database table  you can refer to the name of the image in your php file which wil then get the image from whatever directory it is stored in.(Much faster and effiecent)

 

I would suggest using javascript and php as i found this to be the easiest and most effient way to place images within a slideshow. Have you got a script yet?

Link to comment
Share on other sites

I think I'm going to use BLOB. It suits my application much better. AMG thanks for your help. No I dont have a script yet because I have yet to decide which client side script I am going to use. Do you perhaps know of a good reliable javascript to use as a starting point? I only say javascript specifically because it sounds like youve done this before.

-SB

Link to comment
Share on other sites

Yeah, I have done something quite similar to this before. Slideshow with Play and pause button etc... It was created in javascript.

More than happy to supply you the script if you need. Although I think i had problems using it with BLOB's but I'm sure there is a way around it. I just prefer to store images in the directory.

Link to comment
Share on other sites

Thanks amg182 for sticking with this thread and helping me out. If you would be so kind as to supply me the script that would be tremendous. I mean who knows I may get halfway into the BLOB thing and change my mind in which case it would be even better (call it...contingency planning) hahah. Also to at least i know im starting with something that works and as you suggested i may be able to find a way (probably with the help of you guys) to make it work with BLOBs thanks again.

-SB

 

Link to comment
Share on other sites

Yeah sure here you go.

 

I have placed the images in a table:

 

<table>
<tr>
<td><a href="wpimages/<?php echo $row["Image1"]; ?>" target="_self" rel="wplightbox[a]~#~~#~"><img src='wpimages/<?php echo $row["Image1"]; ?>'width="170" height="130"></a></td>
<td><a href="wpimages/<?php echo $row["Image2"]; ?>" target="_self" rel="wplightbox[a]~#~~#~"><img src='wpimages/<?php echo $row["Image2"]; ?>'width="170" height="130"></a></td>
<td><a href="wpimages/<?php echo $row["Image4"]; ?>" target="_self" rel="wplightbox[a]~#~~#~"><img src='wpimages/<?php echo $row["Image4"]; ?>'width="170" height="130"></a></td>
</tr>
</table>

 

You will need to paste this javascript into your page:

<script type="text/javascript" src="wpscripts/jsFlashVer.js"></script>
<script type="text/javascript" src="wpscripts/jquery.js"></script>
<script type="text/javascript" src="wpscripts/jquery.wplightbox.js"></script>
<style type="text/css">
body {margin: 0px; padding: 0px;}
</style>
<script type="text/javascript" src="wpscripts/jspngfix.js"></script>
<script type="text/javascript">
var blankSrc = "wpscripts/blank.gif";
</script>

<script type="text/javascript">
$(document).ready(function() {

$('a[rel*=wplightbox]').wplightbox({ strImgDir: 'wpimages/', strScriptDir: 'wpscripts/', nButtonType: 2, nBorderType: 6 });

})
</script>

 

There are also some external javascript files you willl need to place inside a folder. If you PM me your email i will forward them to you.

 

 

Link to comment
Share on other sites

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.