Placing Array in Slideshow

Hi all,

I have a bunch of different sentence sequences that I would like to show in slideshow style and I'm wondering the most efficient way to display them on the page.

Here is how I would like it to work. A user selects an exercise from a dropdown and it starts a simple slideshow (taken from a MYSQL DB based on the selection the user makes).. For example, it displays on the page "Sentence 1" and then after 10 seconds this fades out and "Sentence 2" appears. It would just be simple text that would display so I don't need a complex jquery slideshow to do this. Just a script that allows me to put elements from a database into it and then set in the script at what time interval it will move onto the next sentence.

Any advice on the best way to do this would be greatly appreciated. I'm quite familiar with the API for jquery Royalslider for example but I think this would be too complex for what I need here.

Thanks,

D
TLN_CANADAAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
mcnuteConnect With a Mentor Commented:
Hello Tld, I think you're working in your phpfox environment and hence with php.
I would do it with ajax in jquery and php in the backend:

$.ajax({
url: 'page_which_outputs_your_array.php',
type: 'post',
data: 'option=selected_value',
dataType: 'json',
success: function(dat){

   // pass the values which are already in a json object to the function which executes the text change on your page

textchange(dat);

}

});

function textchange(object){
var i = 0;    
$('.text-container').text(object[i].value); // where value is the name of the database field, to check this check what your json_encode methods throughs out in the console by console.log(dat);
setTimeout(function(){
         i++;
if (i > object.size) {
        i = 0; 
        }
         $('.text-container').text(object[i].value);
        

   }, 1000);
}

Open in new window


On the php page_which_outputs_your_array.php:
// connection to db
// query with post value $option =  $_POST['option'];
// now use json_encode() method to ship the json back to your ajax call

$query = "SELECT * FROM table WHERE option=$option";
$result = mysql_query($query);
echo json_encode($result);  // this is very useful since the data is already prepared to use on your receiving page.

Open in new window

0
 
TLN_CANADAAuthor Commented:
Thank you so much mate! This is exactly what I'm after. I'll test this tomorrow and let you know how it goes.
0
 
mcnuteCommented:
I havn't tested it, so it might have some syntax issues or other issues. Just post back here, I'll help to clear the flaws out.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
TLN_CANADAAuthor Commented:
Thanks mcnute, looking at this again I guess my first concern has to be how to best store this information in the DB. I was thinking of storing it in a table with an individual record for each option. Then I could use a delimiter for each individual sentence that would be displayed sequentially. For example a record could be:

Text 1 ; Text 2 ; Text 3;

What do you think about going about it this way?

Thanks,

D
0
 
TLN_CANADAAuthor Commented:
Thanks mcnute, I have integrated the code on the page now. How do I output the function on the page to see if it's working correctly.

Regarding the db, should I put all of the values I want in the one record in the db and use a delimiter or would it be better to put them in separate fields and call the field names sentence_1 sentence_2 sentence_3 etc. ?
0
 
mcnuteCommented:
I would do a whole table for that with, so that your rows in the table represent your textblocks. That's just what I would do. It would be easier to maintain for my likings.
0
 
TLN_CANADAAuthor Commented:
Thanks mcnute,

Here is the table I've created for this. Let me know if this isn't what you intended. If you could show me how to integrate this with what we have here that would be great.

-- phpMyAdmin SQL Dump
-- version 3.5.5
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Feb 10, 2013 at 09:13 PM
-- Server version: 5.1.66-cll
-- PHP Version: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `foxdbmain`
--

-- --------------------------------------------------------

--
-- Table structure for table `video_exercises`
--

CREATE TABLE IF NOT EXISTS `video_exercises` (
  `video_ex_id` int(11) NOT NULL AUTO_INCREMENT,
  `video_ex_title` varchar(35) NOT NULL,
  `block_1` varchar(255) NOT NULL,
  `block_2` varchar(255) NOT NULL,
  `block_3` varchar(255) NOT NULL,
  `block_4` varchar(255) NOT NULL,
  `block_5` varchar(255) NOT NULL,
  `block_6` varchar(255) NOT NULL,
  PRIMARY KEY (`video_ex_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `video_exercises`
--

INSERT INTO `video_exercises` (`video_ex_id`, `video_ex_title`, `block_1`, `block_2`, `block_3`, `block_4`, `block_5`, `block_6`) VALUES
(1, 'Hakomi Exercise 1 ', 'Slide 1 - H-  Practice ', 'Slide 2 - H 2', 'Slide 3 - H 3', '', '', ''),
(2, 'Hakomi Exercise 2 ', 'Slide 1 of Ex 2 ', 'Slide 2 of Ex 2', 'Slide 2 of Ex 3', '', '', '');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Open in new window


Thanks again,

D
0
 
TLN_CANADAAuthor Commented:
Hi mcnute, would you like me to send you any other information about this? Did I setup the table in the correct format?

Thanks,

D
0
 
TLN_CANADAAuthor Commented:
Hi mcnute,

I just wanted to check in and see if you will be able to assist me in completing this?

Thanks,

D
0
All Courses

From novice to tech pro — start learning today.