Avatar of Reece
Reece
Flag 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

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Pyromanci

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Ray Paseur

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Ray Paseur

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
Reece

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
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Reece

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/Web_Development/Blogs/WordPress/Q_28083305.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/Web_Development/Web_Languages-Standards/HTML/Q_27213696.html) for the article you are writing.  The Nundoobah site is another of mine that I needed assistance with a few years back.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Ray Paseur

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
Reece

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.
Ray Paseur

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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Reece

ASKER
nice article BTW