Randomize Testimonials Slider - Support | Kriesi.at

Tagged: random, randomize, testimonials, testimonials slider

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
December 31, 2014 at 4:57 am #373405

rchadek
Participant

Is there a way to randomize the display order of the testimonials in the testimonial slider?

December 31, 2014 at 5:06 pm #373597
Elliott
Inactive Moderator
Hey rchadek!

I found a script which seems to work for me. Try opening up /enfold/js/shortcodes.js and around line 2038 you’ll see this.
```
var container = $(this), elements = container.find('.avia-testimonial');
```
Add this right above it.
```
jQuery(".avia-testimonial-row").randomize(".avia-testimonial");
```
And then add this to the bottom of the file.
```
$.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);
```
Regards,
Elliott
January 21, 2015 at 1:21 am #382805

ravall
Participant

Hi Elliott,

I have the same issue as rchadek. Would be great to implement the randomizing function as option into one update. And would be great a s well to have manual arrows for the small slider view of the testimonial slider. Otherwise it´s great.

Tried the script above, but got syntax error. Assume it to be my fault. Please can you be specific, where at the bottom of the file to add the second code snippet? At the very end of the file? Or just the end of the testimonial slider section?

Thanks

January 21, 2015 at 4:48 pm #383114
Günter
Keymaster
Hi!

There is a syntax error in the code above. Replace it with the following:
```
$.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);
```
It should not make any difference, where you place this code.

If you still recieve errors, try to place it at the beginning (or at least before the code snippet that uses randomize).

Cheers!
Günter
January 26, 2015 at 3:14 pm #385453

ravall
Participant

Hi Günter,

thanks for corrections – but it still doesn´t work. Only the syntax error is cleared.

1. In any case, with this code my testimonial slider stops working at all – that means blank on the frontend.
2. If I place the code below the randomizing code line or at the beginning of the document, on my site the picture sliders and animated pictures stiop working – that means blank on the frontend! So it makes a lot of a difference, where to place the code.

Any idea for a better code?

Best regards

January 27, 2015 at 10:45 am #386108
Ismael
Moderator
Hi!

Please remove the modifications then look for this code on shortcodes.js file, line 2072:
```
var container = $(this), elements = container.find('.avia-testimonial');
```
Below, add this code:
```
$('.avia-testimonial').shuffle();
```
Look for this line:
```
// -------------------------------------------------------------------------------------------
// testimonial shortcode javascript
// -------------------------------------------------------------------------------------------
```
Below, add this code:
```
$.fn.shuffle = function() {

	var allElems = this.get(),
		getRandom = function(max) {
			return Math.floor(Math.random() * max);
		},
		shuffled = $.map(allElems, function(){
			var random = getRandom(allElems.length),
				randEl = $(allElems[random]).clone(true)[0];
			allElems.splice(random, 1);
			return randEl;
	   });

	this.each(function(i){
		$(this).replaceWith($(shuffled[i]));
	});

	return $(shuffled);

};
```
This will only change the order of the testimonials on every page load. Remove browser cache then reload the page.

Cheers!
Ismael
January 27, 2015 at 3:18 pm #386269

ravall
Participant

Hi Ismael,

slowly we are getting somewhere. No syntax problems and the site is keeping its integrity. The randomizing of the presentation ot the testimonial works fine.

BUT:

1. The small pictures (avatars or what else) on the left side of the testimonal author shrink to one third of their usual size and fade with about 50% transparency. Affectid in all modes (large, smal testimonial).

2. If you run two testimonial sliders on one page, the second one is not read anymore. But I don´t care about this, cause I only need one on some pages.

If you solve the shrinking and fading of the comment pics, the thread is solved.

Best regards

January 28, 2015 at 9:24 am #386819

Ismael
Moderator

Hi!

Can you please provide a screenshot of the issue? A link to the actual page will help.

Best regards,
Ismael

January 30, 2015 at 7:45 pm #388468

ravall
Participant

Hi Ismael,

you can see the wrong behavier according to the pics on http://heilarbeit.de/temp/

I´ve made some screenshots to show the difference of original and modified script – the problem are the very small pics left to the headline of the comment. Link ist below.

https://cloud.1und1.de/ngcloud/external?path=Pics%20Testimon%20Slider%20von%20223621055&token=A210B9E4AFCF2251&mandant=06&locale=de&viewType=0&guestToken=soqGKu3ASIebmaULTgcj9w&loginName=223621055#_

Good luck

February 2, 2015 at 6:43 am #389151
Ismael
Moderator
Hi!

Add this on Quick CSS:
```
.avia-slider-testimonials .avia-testimonial-meta .avia-testimonial-image {
margin: 0 10px 0 0;
width: 40px;
height: 40px;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
```
Cheers!
Ismael
February 2, 2015 at 3:03 pm #389332

ravall
Participant

Hi Ismael,

that´s it … gotcha…. Everything works perfect. You can close the thread.

Thanks very much for effective and caring support.

Best regards
Radim

February 2, 2015 at 4:32 pm #389398

Günter
Keymaster

Hi!

Glad we could help you. Enjoy the theme.

Cheers!
Günter
Author

Posts