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

Learning how to track mouse wheel scrolling using jQuery

Is there a way to track mouse scrolling using jquery or javascript? I want the initial value to be 0 and increment by 1 when scrolling down and decrement by 1 when scrolling up. The value should always be positive. For example, if I scroll down twice, the ...

javascriptjqueryhtmlcss

Struggling to center an image within a CSS border

I'm attempting to include a subtle border around an icon. The issue I am facing is that the image is positioned at the top of the bordered area, whereas I want it centered. Here's how it currently appears: This is my current border CSS style: ...

css

The CSS theme fails to adapt to changes made using jQuery

I encountered a peculiar problem while using a CSS theme with jQuery. After applying a custom CSS theme to a webpage, everything looked fine. However, when I performed certain operations using jQuery - like checking checkboxes causing others to be checked ...

jquerycssthemes

A Greasemonkey script for organizing and categorizing webpage elements

I've been working on a script to enhance the functionality of Facebook's find friends page by organizing suggested friends based on mutual connections. If you're interested in checking out the code, you can find it right here: http://pasteb ...

javascriptjqueryfacebookgreasemonkey

Having trouble with CSS Transition functionality not functioning properly

I have set up a temporary page with a two-word message in the h1 tag. The h1 has a CSS3 infinite transition for shadow animation. The shadow is visible on all sides, but it does not transition smoothly. The shadow changes abruptly at regular intervals. I ...

htmlcss

Using JQuery Datatable plugin to bind data in ASP.NET MVC applications

Having trouble implementing the JQuery Datatable plugin in my ASP.NET MVC application. Despite receiving JSON data from the controller, the table is stuck displaying a "Loading..." message. Here is my controller code: public ActionResult GetCompanies(jQu ...

jqueryasp.net-mvcjsondatatables

How can I include an HTML tag within a select input value in a React.js project?

I am facing an issue while trying to map values from the input field of a select tag. It seems to be returning [Object object] for some reason. When I do not include another tag in the return statement of the map function, the output works fine. However, I ...

javascripthtmlreactjs

What is a solution to prevent style.css from being recognized as the Jekyll Page?

Currently, I am utilizing an expression {% assign mypages = site.pages | sort: "order" %} {% for page in mypages %} {% unless page.exclude %} <a href="{{page.url|absolute_url}}"> {{ page.shortname }} <span class="rate">{% include indexmod.h ...

cssrubyjekyllliquidgithub-pages

When attempting to assign a variable in my ngModel, what issue could be causing a problem?

I am facing an issue while trying to implement ngModel in my code. The code is not executing properly and an error is being displayed. Below is the code snippet: contact-form.component.html: <div class="container"> <form> <div class ...

htmlangular

difficulties arise when adjusting font size in html and css

When I first created an all HTML/CSS website, I used clickable images as a menu that scaled perfectly on all monitors and browsers. Now, for my new project, I wanted to use a background image for the menu with hyperlinked text on top. I thought setting the ...

htmlcssmenuscreen-resolutionfont-size

Submitting a form with AJAX and additional fields can be accomplished by including the extra fields in

Imagine a scenario where I am working with a basic form like the one below <%= form_for(@category) do |f| %> <% if @category.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@category.errors.count, "erro ...

javascriptjqueryruby-on-railsajaxruby-on-rails-4

What is the best way to bring up the keyboard on an iPhone when focusing an HTML text field?

Currently working on developing a web app for iPhone, and looking to implement a feature where a text field is automatically focused upon page load, prompting the keyboard to appear. Despite attempting the standard Javascript method: input.focus(); I see ...

javascriptiphonehtml

Using Vanilla JavaScript to Disable a Specific Key Combination on a Web Page

On a completely random English-Wikipedia editing page, there exists a way to add content (for example, "test") and save it using the existing key combination of Alt+Shift+S. My goal is to specifically prevent this action without removing the save button b ...

javascriptjqueryhtmlreturnkeyboard-shortcuts

Having trouble customizing the HTML range input?

I am looking to customize the appearance of a range input slider. Specifically, I want the slider to be green for the lower portion (where the thumb has moved) and grey for the remaining section. I have successfully changed the default styles from blue and ...

javascripthtmlcssangularrange

"Using Javascript to assign a class based on a date being greater than

I am facing an issue with a script that applies a CSS class to table cells if the date is greater than a certain value. Currently, the script only works for today's date. I need it to work for dates within and outside of this week as well. $('td ...

javascriptjquerycssdate

Choose the immediate sibling located right after a specific element

My goal is to have the second paragraph following a h1 element display a dropcap, with the first being reserved for the author and date. Although I've tried using different CSS combinations like h1 + p::first-letter {}, it only affects the first para ...

css

Issue with AngularJS controller method not functioning properly when assigned to a Div

I am facing an issue with a login form and its controller. The login function is not triggering upon submitting the form for some reason. Here is the code snippet for the form within the larger view file: <div class="login-wrap" ng-controller="LoginCt ...

javascriptjqueryangularjs

Discover the method for populating Select2 dropdown with AJAX-loaded results

I have a basic select2 box that displays a dropdown menu. Now, I am looking for the most effective method to refresh the dropdown menu every time the select menu is opened by using the results of an AJAX call. The ajax call will yield: <option value=1 ...

javascriptjqueryajaxjquery-select2

Discovering the Keys of a Multidimensional Array in JSON with AngularJS

I'm attempting to create a form using a JSON array. I want to display the keys in the HTML. Check out this example array: { "Fred": { "description": "A dude" }, "Tomas": { "description": "Another Dude", "Work": { "Current" ...

htmlarraysangularjsjson

Divided Progress Indicators in Bootstrap 3

Looking to enhance user experience on my webpage by creating a progress bar for data entry. The goal is for users to enter 10 items before proceeding. The challenge I'm facing is developing a progress bar that accurately reflects the number of items ...

htmlcsstwitter-bootstraptwitter-bootstrap-3progress-bar