Testimonial Gallery

Developer
Joo Vctor De Oliveira Santos
Size
3,887 Kb
Views
32,384
  1. Testimonial Gallery Previews
  2. Testimonial Gallery HTML Codes
  3. Testimonial Gallery CSS Codes
  4. Testimonial Gallery JS Codes

How do I make an testimonial gallery?

Simple gallery to show testimonials.. What is a testimonial gallery? How do you make a testimonial gallery? This script and codes were developed by Joo Vctor De Oliveira Santos on 27 August 2022, Saturday.

Testimonial Gallery Previews
IQ Test

Testimonial Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Testimonial Gallery</title> <link href='https://fonts.googleapis.com/css?family=Raleway:700,300italic' rel='stylesheet' type='text/css'> <meta charset="utf-8"> <meta name="author" content="João Víctor de Oliveira Santos, [email protected]"> <meta name="keywords" content="HTML,CSS,JavaScript,Testimonial,Gallery,Slider"> <meta name="description" content="A simple testimonial gallery."> <link rel="stylesheet" type="text/css" href="css/testimonial.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="testimonial-gallery">	<div class="testimonial-item">	<div class="testimonial-image">	<img src="http://www.placecage.com/300/300" alt="Tristan W.">	</div>	<div class="testimonial-content">	<!-- Generated by http://testimonial-generator.com/ -->	<div class="testimonial-text">Without Testimonial Gallery, we would have gone bankrupt by now. It's really wonderful. I am so pleased with this product.</div>	<div class="testimonial-author">Tristan W.</div>	</div>	</div>	<div class="testimonial-item">	<div class="testimonial-image">	<img src="http://www.placecage.com/400/400" alt="Masha V.">	</div>	<div class="testimonial-content">	<!-- Generated by http://testimonial-generator.com/ -->	<div class="testimonial-text">Man, this thing is getting better and better as I learn more about it.</div>	<div class="testimonial-author">Masha V.</div>	</div>	</div>	<div class="testimonial-item">	<div class="testimonial-image">	<img src="http://www.placecage.com/500/500" alt="Glori Q.">	</div>	<div class="testimonial-content">	<!-- Generated by http://testimonial-generator.com/ -->	<div class="testimonial-text">I will let my mum know about this, she could really make use of Testimonial Gallery! Thanks to Testimonial Gallery, we've just launched our 5th website!</div>	<div class="testimonial-author">Glori Q.</div>	</div>	</div>	<div class="testimonial-item">	<div class="testimonial-image">	<img src="http://www.placecage.com/600/600" alt="Skip J.">	</div>	<div class="testimonial-content">	<!-- Generated by http://testimonial-generator.com/ -->	<div class="testimonial-text">Testimonial Gallery saved my business.</div>	<div class="testimonial-author">Skip J.</div>	</div>	</div>	<div class="testimonial-item">	<div class="testimonial-image">	<img src="http://www.placecage.com/700/700" alt="Biff Q.">	</div>	<div class="testimonial-content">	<!-- Generated by http://testimonial-generator.com/ -->	<div class="testimonial-text">Needless to say we are extremely satisfied with the results. Since I invested in Testimonial Gallery I made over 100,000 dollars profits.<br>You guys rock! Testimonial Gallery was worth a fortune to my company.</div>	<div class="testimonial-author">Biff Q.</div>	</div>	</div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Testimonial Gallery - Script Codes CSS Codes

.testimonial-gallery, .testimonial-item, .testimonial-content{	width: 100%;
}
.testimonial-gallery, .testimonial-item {	position: relative;
}
.testimonial-image, .testimonial-content{	display: inline-block;
}
.testimonial-content, .testimonial-text, .testimonial-author {	position: absolute;
}
.testimonial-gallery {	height: 230px;	overflow: hidden;
}
/*	ITEM CONFIGS */
.testimonial-item {	height: 50px;	margin: 20px;	-webkit-transition: top 500ms ease-in-out;	transition: top 500ms ease-in-out;
}
.testimonial-image, .testimonial-image > img {	height: 100%;	width: auto;
}
/*	IMAGE BORDER CONFIGS */
.testimonial-image > img {	border-radius: 50%;
}
.testimonial-content {	opacity: 0;	top: -30px;	padding: 15px;	height: 100%;
}
/*	TEXT CONFIG */
.testimonial-text, .testimonial-author{	font-family: 'Raleway', sans-serif;
}
.testimonial-text {	top: 50%;	font-weight: 700;	font-size: 1.3em;	-webkit-transform: translate(0, -50%); transform: translate(0, -50%);
}
.testimonial-author {	font-weight: 300;	font-style: italic;	left: 0;	bottom: 10px;
}
.testimonial-text::after,
.testimonial-text::before {	content: "\"";
}
.testimonial-author::before {	content: "- ";
}

Testimonial Gallery - Script Codes JS Codes

var tes_time = 5000; //How much time you want in one item, in MS. Default: 5s (5000)
var tes_timer = null; // Hold the Timeout object
/* animation durations */
var tes_fadeText = 1000;
var tes_changeSize = 500;
var tes_slideUp = 500;
/* animations properties */
var tes_itemDefaultHeight = "50px";
var tes_itemDiffHeightTop = "3px";
var tes_itemDiffHeightBottom = "25px";
var tes_itemActiveHeight = "75px";
var tes_initialTextOpacity = "0";
var tes_activeTextOpacity = "1";
function change() { if (tes_timer != null) { clearTimeout(tes_timer); tes_timer = null; }	$secondItem = $(".testimonial-gallery .testimonial-item:nth-child(2)"); //Cache the second item
$firstItem = $(".testimonial-gallery .testimonial-item:nth-child(1)"); //Cache the first item
$secondItem.removeClass("active"); //Remove the active state from the second item
$secondItem.find(".testimonial-content").animate({ "opacity": tes_initialTextOpacity }, tes_fadeText, function() { //Fade out the active item text content, and when is done $firstItem.animate({ "margin-top": '0px' }, tes_changeSize); $secondItem.animate({ "height": tes_itemDefaultHeight, "margin-bottom": "0px" }, tes_changeSize, function() { // Return the actual item to his default size, and whe is done $firstItem.animate({ "margin-top": "-" + tes_itemDefaultHeight }, tes_slideUp, function() { // Move the first item to outside the gallery zone, and when is done var tmp = $firstItem.remove(); //Remove the first item DOM object tmp.css("margin-top", ""); // Reset the margin to nothing $(".testimonial-gallery").append(tmp); //Append the tmp DOM object, as the last one. $firstItem = $secondItem; $secondItem = $(".testimonial-gallery .testimonial-item:nth-child(2)"); //Cache the second item $secondItem.addClass("active"); //Add the class active to the second item $firstItem.animate({ "margin-top": "-" + tes_itemDiffHeightTop }, tes_changeSize); $secondItem.animate({ "height": tes_itemActiveHeight, "margin-bottom": tes_itemDiffHeightBottom }, tes_changeSize, function() { //Increase the actual item size, and when is done $secondItem.find(".testimonial-content").animate({ "opacity": tes_activeTextOpacity }, tes_fadeText); //Fade in the actual item text content. tes_timer = setTimeout(change, tes_time); }); }); })
});
}
// Call setup when the page loads (or when you want to load de plugin)
function setup() { //Initial setup the elements for the loop, it will make the transition smoother $(".testimonial-gallery .testimonial-item:nth-child(1)").css({ "margin-top": "-" + tes_itemDiffHeightTop }); $(".testimonial-gallery .testimonial-item:nth-child(2)").addClass("active").css({ "height": tes_itemActiveHeight, "margin-bottom": tes_itemDiffHeightBottom }); $(".testimonial-gallery .testimonial-item:nth-child(2) .testimonial-content").css({ "opacity": tes_activeTextOpacity }); // First call to change will start the loop tes_timer = setTimeout(change, tes_time); //You can change $(".testimonial-gallery") to $(".testimonial-item.active") //If you want to stop only when mouse is over the actual item. Remember to change in both lines. $(".testimonial-gallery").mouseenter(function() { //Stop the timer when mouse is over the gallery if (tes_timer != null) { clearTimeout(tes_timer); tes_timer = null; } }); $(".testimonial-gallery").mouseleave(function() { // Restart the timer with 2 seconds when mouse leave the gallery if (tes_timer == null) tes_timer = setTimeout(change, 2000); });
}
/*	If you are not working in CodePen, uncomment this line and remove the last line.
$(document).load(function(){	setup();
});*/
setup(); //Remove this line and uncomment the above ones, if you are not using CodePen
Testimonial Gallery - Script Codes
Testimonial Gallery - Script Codes
Home Page Home
Developer Joo Vctor De Oliveira Santos
Username jvhti
Uploaded August 27, 2022
Rating 3
Size 3,887 Kb
Views 32,384
Do you need developer help for Testimonial Gallery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joo Vctor De Oliveira Santos (jvhti) Script Codes
Name
Youtube Random Video With Cover Image
JavaScript Calculator
Simon Game
JQuery UI Playground
Price Table
Markdown Previewer
Tic Tac Toe Game
Wikipedia Viewer
Love Letter
Page Size Menu Example
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!