Solved

Placing Array in Slideshow

Posted on 2013-02-03
9
181 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
9 Comments
 
LVL 11

Accepted Solution

by:
mcnute earned 500 total points
ID: 38850345
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
ID: 38850380
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
ID: 38850528
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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

Author Comment

by:TLN_CANADA
ID: 38852968
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
 

Author Comment

by:TLN_CANADA
ID: 38862348
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
ID: 38863084
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
ID: 38874765
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
ID: 38887257
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
ID: 38895887
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

733 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