Solved

Placing Array in Slideshow

Posted on 2013-02-03
9
177 Views
Last Modified: 2013-02-23
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
0
Comment
Question by:TLN_CANADA
  • 6
  • 3
9 Comments
 
LVL 11

Accepted Solution

by:
mcnute earned 500 total points
Comment Utility
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
 

Author Comment

by:TLN_CANADA
Comment Utility
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
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
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
 

Author Comment

by:TLN_CANADA
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:TLN_CANADA
Comment Utility
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
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
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
 

Author Comment

by:TLN_CANADA
Comment Utility
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
 

Author Comment

by:TLN_CANADA
Comment Utility
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
 

Author Comment

by:TLN_CANADA
Comment Utility
Hi mcnute,

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

Thanks,

D
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now