Avatar of Reece
ReeceFlag for Australia

asked on 

Add php code to javascript slideshow

There is a "quote" section on my current WP theme (@ http://lillypillyps.com.au) home page that I would like to replace with a "cycling" banner of sorts.

Similar to the testimonials on this site's header, I want it to display a random testimonial on page load and cycle through all others.

I have a posts category called "testimonials" (ID=4) that I want it to pull the title and content from for this.

So far, I've managed to figure out how to pull a testimonial at random and display on my home page (if you see the page source, you will see that I've commented out the original content for this area of the home page)...

How can I implement what I have so far with the script used on this site's header?

<script type="text/javascript"> 
    $(document).ready(function() { 
            $('#escape').fadeIn(3000).delay(2000).fadeOut(3000); 
            $("#quotes").load("quotes.html",function() {
        $quotes = $("p.quotes");
        var q = Math.floor( Math.random() * $quotes.length );
        $quotes.eq(q).addClass("next"); // set the next to fade
        f();        
    })
});
function f() {
    $(".next").fadeIn(3000).delay(2000).fadeOut(3000, function() {
        // fadeout ended, we prepare the next one
        $(this).removeClass("next");
        $(this).next("p.quotes").addClass("next");
        if($(".next").length==0) $("p.quotes:first").addClass("next");
        f();
    });
}
</script>

Open in new window


Because that script is just loading a flat html file and using the <p> with the "quotes" class...

Thanks in advance.
JavaScriptPHPCSS

Avatar of undefined
Last Comment
Reece
ASKER CERTIFIED SOLUTION
Avatar of Pyromanci
Pyromanci
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
SOLUTION
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

I decided that this was interesting enough to create the SSCCE and write an article about it.  It will be a couple of days before I am finished with an article, but there is no reason for you to wait.  Here is what I have so far.

First, you need your library of quotes.
http://www.laprbass.com/RAY_EE_fading_quotes_source.html
<p class="quotes"> &quot;Comment #1 Lovely!&quot; <span> - Author #1 </span></p>
<p class="quotes"> &quot;Comment #2 Fantastic!&quot; <span> - Author #2 </span></p>
<p class="quotes"> &quot;Comment #3 Super!&quot; <span> - Author #3 </span></p>
<p class="quotes"> &quot;Comment #4 Wonderful!&quot; <span> - Author #4 </span></p>
<p class="quotes"> &quot;Comment #5 Delightful!&quot; <span> - Author #5 </span></p>
<p class="quotes"> &quot;Comment #6 Magnificent!&quot; <span> - Author #6 </span></p>

Open in new window

Next you need your web page.  Note the comment on line 25.  If you use that statement instead of the previous assignment for var q, you will get the quotes to start over from the top instead of a random start.  Depending on your design preferences, that might make sense.  You might also want to experiment with the fade and delay times on line 32.
http://www.laprbass.com/RAY_EE_fading_quotes.html
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />

<style type="text/css" media="screen">
#banner p {
    color: green;
    display:none;
}

#banner p span {
    color: blue;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#quotes").load("RAY_EE_fading_quotes_source.html",function(){
        $quotes = $("p.quotes");
        var q = Math.floor( Math.random() * $quotes.length );
/*        var q = 0; */
        $quotes.eq(q).addClass("next"); // set the next to fade
        f();
    })
});

function f(){
    $(".next").fadeIn(500).delay(4000).fadeOut(500, function(){
        // fadeout ended, we prepare the next one
        $(this).removeClass("next");
        $(this).next("p.quotes").addClass("next");
        if($(".next").length==0) $("p.quotes:first").addClass("next");
        f();
    });
}
</script>

<title>HTML5 Page in UTF-8 Encoding</title>
</head>
<body>

<div id="banner">
<div id="quotes"></div>
</div>

</body>
</html>

Open in new window

Best regards, ~Ray
Avatar of Reece
Reece
Flag of Australia image

ASKER

Thanks Ray.  I would do it that way, but the issue is that I won't be the one maintaining the site's content.  Hence the Wordpress CMS.

The testimonials are all displayed here (http://lillypillyps.com.au/category/testimonials/).
They are "posts" with the category "Testimonials" (Cat ID=4) selected.

So I was hoping I could have the script pick a testimonial at random like the code below, and then either cycle through the rest like Nundoobah or keep picking random posts categorised as a testimonial.

<?php
//get one random post from category 4, display post title, and excerpt.
//display WritersName custom field if it exists.
$args=array(
  'cat' => 4,
  'orderby' => rand,
  'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => 1,
  'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
    
    <p><?php the_content(); ?></p>
	<span class="testimonial-author"><?php the_title();
	
    $name = get_post_meta($my_query->post->ID, 'WritersName', true);
    if ($name){
      echo 'Writers name: ' .$name;
    }
  endwhile;
}
wp_reset_query();  // Restore global post data stomped by the_post(). ?></span>

Open in new window



This is where it has me stuck...
SOLUTION
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Avatar of Reece
Reece
Flag of Australia image

ASKER

Thanks guys.  I found a plug-in similar to what I want to do with minimal code work required.
It needs a few tweaks to get it the way I want (see https://www.experts-exchange.com/questions/28083305/Wordpress-truncate-posts-question.html), but they'll be a lot easier than starting from scratch - or two chunks of code that may not be able to work together.

I appreciate the input though.

And Ray, be sure to credit the Experts here (https://www.experts-exchange.com/questions/27213696/another-easy-one-random-text-on-page-load-AND-rotate-every-few-seconds.html) for the article you are writing.  The Nundoobah site is another of mine that I needed assistance with a few years back.
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

It appears that you do not understand the EE grading guidelines, a common misconception.  Please see the grading guidelines.  It seems like you might have taken my suggestion to post in the WordPress Zone, but instead you gave the worst possible grade that anyone can give at EE.
https://www.experts-exchange.com/help/viewHelpPage.jsp?helpPageID=26

Since the accepted answer has nothing to do with the question and since you got a tested and working code example that did exactly what you asked for, I will ask a moderator to reopen the question so you can explain or amend the bad grade.  

Thanks for your understanding and best regards, ~Ray
Avatar of Reece
Reece
Flag of Australia image

ASKER

A grade is a grade.  I did not request the question to be closed unanswered.  Which it was.

I do not know what tested and working code example you are talking about... if you are referring to the mention of an article you are writing, I don't know what deluded you into thinking this was an answer to my question.  
That is almost a direct rip from the Nundoobah site, which is one of mine to begin with, and I would've just used the same script if it was the solution I needed.  But it wasn't...

My question was "How can I implement what I have so far with the script used on this site's header?"

so far was in reference to the PHP code used to pull a random quote from the category specified and display in the content area as required.
This site's header was in reference to a site I had full access to both the javascript and the file it reads.

I didn't ask for understanding of how the Nundoobah site's script works... I asked how I can utilise the script (or one similar to it) to show a fade-in/fade-out slideshow of "testimonials" pulled from a category in the same way the php query does.

I accepted your answer (you got points) because it was the most useful to finding a solution.  The answer given was average at best.   As I said, I do appreciate the assistance, but there should be no complaint as the question was not resolved.
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

I accepted your answer (you got points) because it was the most useful to finding a solution.
OK, thanks for your comment.  When "the question was not resolved" you have an obligation as a member of the EE community to continue the dialog.  We will now leave it to the moderators.

The article is here:
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_11357-Upgrading-the-Marquee-Tag-with-jQuery.html

Best of luck with your project, ~Ray
Avatar of Reece
Reece
Flag of Australia image

ASKER

nice article BTW
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo