Testimonials paired with captivating visuals

I am interested in featuring a rotating selection of testimonials on my homepage. I would like to display only one testimonial at a time, with the content randomized upon each page refresh.

My vision is for each testimonial to include a quote, the author's name, and a photograph of the author. While I have previously achieved random testimonials using a plugin, I now feel drawn to the idea of incorporating images to put a face to each quote.

To illustrate what I have in mind, I have created a static version:

<div id="right_sidebar">
<div class="testimonials">
<div class="ref-picture"></div>
<blockquote>
<cite><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget vestibulum elit. Cras pretium, dui sed egestas elementum, augue eros mattis erat, quis porta diam urna vitae lacus.</p>
</cite>
<div class="author">Paul Scholes - Manchester United</div>
</blockquote>
</div>
</div>

CSS:

.testimonials {
width: 218px;
padding: 0px;
margin: 0px;
font-family: "adelle",serif;
margin-top: 13px;
padding-top: 10px;
position: relative;
}

.ref-picture {
width: 100px;
height: 100px;
border-radius: 75px;
background: url('images/testimonial1.jpg') no-repeat;
position: absolute;
top: 0px;
left: 59px;
margin: 0 auto;
padding: 0;
z-index: 2;
}

.testimonials .author {
padding: 10px;
padding-top: 0px;
font-family: "adelle",serif;
color: #dedede!important;
font-size: 11px;
border: 0px;
}

.testimonials blockquote {
font-size: 18px;
line-height: 24px;
font-family: Lato;
font-style: normal;
font-weight: lighter;
color: #333;
padding: 0px;
margin-top: 5px;
background: black;
position: relative;
top: 50px;
}

.testimonials blockquote cite {
font-size: 11px;
}

.testimonials blockquote cite p {
line-height: 16px!important;
padding: 70px 10px 20px 10px;
color: white;
}

In conclusion, can this concept be realized? If so, does anyone have suggestions on how to execute it? Perhaps through the use of a JQuery script?

Thank you in advance.

jqueryhtmlcsswordpress

Answer №2

Store the customer reviews in an array:

var customerReviews = [
  { picture: 'images/customerReview1.jpg', feedback: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.', author: 'John Doe - CEO' },
  { picture: 'images/customerReview2.jpg', feedback: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', author: 'Jane Smith - CTO' },
  { picture: 'images/customerReview3.jpg', feedback: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', author: 'Michael Johnson - COO' }
];

Select one review at random:

var review = customerReviews[Math.floor(Math.random() * testimonials.length)];

Insert the information into the designated elements. Optionally, utilize jQuery for easy element retrieval and updates:

$('.customer-feedback .ref-picture').css('backgroundImage', 'url('+review.picture+')');
$('.customer-feedback p').text(review.feedback);
$('.customer-feedback .author').text(review.author);

Example: http://jsfiddle.net/exampleURL123/

Answer №3

I'm a big fan of jQuery. If you want to add some excitement to your testimonials, check out this randomize plugin that will shuffle them up for you. For more information on jQuery, visit their website here 

(function($) {

$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.remove(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      

  });    
}
})(jQuery);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with Angular JS's ngRoute feature not functioning properly

I've been struggling with my ngRoute implementation. I seem to be unable to load the 'ngRoute' module for some reason. Whenever I run this code, I just end up with a blank page. Below is my app.js file: var app = angular.module('tutor ...

javascripthtmlangularjs

"Enhance Your Design With CSS3 Styling for Labels and

HTML <div class="select"> <div> <label for="kitty" class="kitty-label kitty-label-1 l-center"> </label> <input type="checkbox" name="cats" value="1"> <label>Kitty One</label> ...

htmlcss

The jQuery ajax function is not properly displaying or hiding the loader div

While attempting to call PHP code using a jQuery AJAX function, I encountered an issue where I wanted to display a loader div while the request was being sent and then hide the div once the request was complete. To simulate this scenario, I deliberately de ...

javascriptphpjqueryajax

What is the most effective method for altering HTML form components using PHP?

Can you explain how to manipulate and add form elements using PHP? Let's say I have a form stored in a PHP variable like this: $originalForm = ' <form method="post" action="whatever.php"> <input type="text" name="iamtextfield" id="text ...

phphtmlregexdomxpath

Using jQuery to merge two JSON objects into a single table

I'm currently working on creating a table like this: <table id="list"> <th>ID</th> <th>Name</th> <th>Price</th> <th>Image</th> < ...

javascriptjqueryget

Increasing the padding at the top of the logo when scrolling down the page

When scrolling down the page, there seems to be extra padding above the logo that is throwing off the alignment with the rest of the site. I've been trying different solutions to correct this issue: //$('.navbar-brand').css({ 'padding- ...

javascriptjqueryhtmlcsstwitter-bootstrap

I am experiencing issues with the rendering of my q-btn elements in Quasar and they are

I recently started using Quasar and encountered an issue with my q-btn component buttons displaying white backgrounds at random, despite having added a background-color in the external stylesheets. Here are some examples of this perplexing problem: The e ...

javascripthtmlvue.jssassquasar-framework

How can one import files from an external CSS template in CakePHP 2.x?

I recently acquired an external HTML template that I purchased from a website called themeforest: https://i.sstatic.net/UIu6g.png The folder structure is as follows: base/ - css/ - fonts/ - images/ - img/ - js/ - index.html The template file Index.html ...

htmlcsstemplatescakephp

Using jQuery to clear a textarea when a select input is changed

Currently, I am in the process of developing a small text editor that enables users to edit files and create new ones. Here is how I have set up my select menu. <select name="reportname" id="reportname" class="form-control"> <option value="zr ...

javascriptjqueryhtmlajax

Guide to Embedding Dynamic Images in HTML Using VUE

I am venturing into the world of VUE for the first time, and I find myself in need of a header component that can display an image based on a string variable. Despite my best efforts to search for tutorials, I have not been able to find a solution. Header ...

javascripthtmlcssvue.js

Error: The function pajinate is not defined for jQuery([...])

I'm currently experiencing difficulties with the jQuery Pajinate plugin after migrating to a new host. The script was functioning properly on my previous hosting platform, but now I seem to be encountering some problems. Below is the code snippet: ...

javascriptjquery

Place a user input field within a div element having the specified class

I am trying to insert an HTML input element into the following div: <div class="sss" style="padding-top:2px"> <center> <input value="test1" name="name1" type="submit" > <input value="test2" name="name2" type="submit"> </c ...

javascriptjqueryappend

"Upon choosing a file using the HTML input file multiple element, a triggered event

After selecting multiple files using the input type="file" HTML element, I am eager to start uploading them. Can you tell me which event I should use to execute code immediately after finalizing my file selection? This is what my HTML code looks like: &l ...

javascriptjqueryhtmldom-events

What is the best way to apply the CssClass "active" when clicking on a link

How can we update the cssClass of a link button on each click event, considering that the page refreshes every time? Currently, when I click on any LinkButton, the default behavior sets the cssClass to Plus LinkButton. ---index.aspx----------- <ul cl ...

javascriptasp.netcssvb.net

Verify if the username is already in use

Is it possible to validate the existence of a username while the user is entering it in a textbox or immediately after they finish typing? Should I use Jquery or Ajax for this task? Does anyone have any examples demonstrating how this can be done? ...

javascriptjqueryasp.netajax

Using Jquery to select a specific id for an input element that is a checkbox

I've been working on a snippet of jQuery code that I'd like to tailor to be more specific for one of two different input elements on my HTML page. <script> // ensure only one box is checked at a time $(document).ready(function() { ...

javascripthtmljquerycssinput

Having trouble accessing the div element inserted by the Angular application

I've encountered an issue while trying to access a div that is injected into the DOM by an Angular app on the page. Below is the script I have placed at the end of the HTML page: $(document).ready(function () { var targetNode = document.querySelect ...

javascripthtmlangularjsdom

Learn how to display only certain elements when triggered by the click of another

I have developed a tab system where each tab contains a unique set of questions and answers. The structure of the tabs is exactly as I envisioned, but I am facing challenges with toggling the display of answers when their respective questions are clicked. ...

javascriptjqueryhtml

How to position the navigation bar to the right using bootstrap

I have been experimenting with moving the navigation bar to the right side of the screen in bootstrap4 by using float: right; on the nav a element, but it doesn't seem to be having any effect. I am developing my project using a codepen app. Here is t ...

htmlcsstwitter-bootstrapweb

Tips for utilizing various broadcast options to trigger Angular controllers according to the user's chosen selection

I'm currently developing an angularjs application that includes multiple date range pickers on a single web page. When a user selects a date range from one of these pickers, I need to send the selected dates to the corresponding angular controller ass ...

javascriptjqueryangularjs