Your IP : 216.73.216.172
<html><body></body></html>.su-timeline {
list-style: none;
position: relative;
max-width: 1170px;
padding: 50px 0;
margin: 0 auto;
overflow: hidden;
}
.su-timeline:after {
content: '';
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 4px;
background: rgba(200, 200, 200, 0.5);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.su-timeline .su-timeline-row {
padding-left: 50%;
position: relative;
z-index: 10;
}
.su-timeline .su-timeline-row .su-timeline-time {
position: absolute;
right: 50%;
top: 45px;
text-align: right;
margin-right: 40px;
font-size: 12px;
line-height: 1.3;
font-weight: 600;
}
.su-timeline .su-timeline-row .su-timeline-time small {
display: block;
color: rgb(104, 104, 104);
text-transform: uppercase;
opacity: 0.75;
font-size: 11px;
font-weight: 400;
}
.su-timeline .su-timeline-row .su-timeline-icon {
position: absolute;
left: 50%;
text-align: center;
color: white;
font-size: 14px;
z-index: 100;
border-radius: 50%;
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.su-timeline .su-timeline-row .su-timeline-icon.has-ta-icon {
top: 30px;
width: 48px;
height: 48px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.su-timeline .su-timeline-item-text {
margin-top: 5px;
}
.su-timeline .su-timeline-row .su-timeline-icon > div {
border-radius: 50%;
line-height: 48px;
font-size: 16px;
display: block;
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.su-timeline .su-timeline-row .su-timeline-content {
position: relative;
margin-left: 60px;
background: white;
border-radius: 3px;
padding: 1.5em;
box-shadow: 0 3px 0 rgba(200, 200, 200, 0.5);
}
.su-timeline .su-timeline-row .su-timeline-content:after {
content: '';
position: absolute;
top: 45px;
right: 100%;
height: 0;
width: 0;
border: 8px solid transparent;
border-right: 8px solid white;
}
.su-timeline .su-timeline-row .su-timeline-content h2 {
font-size: 22px;
margin-bottom: 12px;
margin-top: 0;
line-height: 1.2;
}
h3.su-timeline-item-title {
font-size: 20px;
margin-bottom: 15px;
}
h3.su-timeline-item-title a {
text-decoration: none;
}
.su-timeline .su-timeline-row .su-timeline-content p {
margin-bottom: 15px;
}
.su-timeline .su-timeline-row .su-timeline-content img {
margin-bottom: 15px;
}
.su-timeline .su-timeline-row .su-timeline-content .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
margin-bottom: 15px;
overflow: hidden;
}
.su-timeline .su-timeline-row .su-timeline-content .video-container iframe,
.su-timeline .su-timeline-row .su-timeline-content .video-container object,
.su-timeline .su-timeline-row .su-timeline-content .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.su-timeline .su-timeline-row:nth-child(odd) {
padding-left: 0;
padding-right: 50%; }
.su-timeline .su-timeline-row:nth-child(odd) .su-timeline-time {
right: auto;
left: 50%;
text-align: left;
margin-right: 0;
margin-left: 40px; }
.su-timeline .su-timeline-row:nth-child(odd) .su-timeline-content {
margin-right: 60px;
margin-left: 0; }
.su-timeline .su-timeline-row:nth-child(odd) .su-timeline-content:after {
right: auto;
left: 100%;
border-left: 8px solid white;
border-right: none;
}
.su-timeline.animated .su-timeline-row .su-timeline-content {
opacity: 0;
left: 20px;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
transition: all 0.8s; }
.su-timeline.animated .su-timeline-row:nth-child(odd) .su-timeline-content {
left: -20px; }
.su-timeline.animated .su-timeline-row.active .su-timeline-content {
opacity: 1;
left: 0; }
.su-timeline.animated .su-timeline-row.active:nth-child(odd) .su-timeline-content {
left: 0; }
/* temp */
.bg-primary {
background-color: #E3E3E3;
}
.su-timeline .su-timeline-row.su-timeline-has-year.active {
margin-top: 120px;
}
.su-timeline .su-timeline-year span {
position: absolute;
top: -90px;
left: 50%;
margin-left: -60px;
font-size: 26px;
font-weight: bold;
background: #FFF;
line-height: 26px;
padding: 10px 5px;
box-shadow: 0 3px 0 0px rgba(200, 200, 200, 0.5);
border-radius: 2px;
z-index: 11;
width: 120px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.su-timeline .su-timeline-year span:after {
}
div.su-timeline-before-text, .su-timeline-after-text {text-align: center;border-radius: 2px;}
div.su-timeline-before-text span, .su-timeline-after-text span {
background: #fff;
display: inline-block;
font-size: 18px;
line-height: 20px;
padding: 10px 20px;
border-radius: 2px;
box-shadow: 0 3px 0 0px rgba(200, 200, 200, 0.5);
}
/* Only phones */
@media (max-width: 768px) {
.su-timeline .su-timeline-row {
padding: 30px 0;
}
.su-timeline .su-timeline-row:nth-child(odd) {
padding-right: 0;
}
.su-timeline .su-timeline-row:nth-child(odd) .su-timeline-content {
margin-right: 0;
}
.su-timeline .su-timeline-row .su-timeline-content {
margin-left: 0px;
}
.su-timeline .su-timeline-row .su-timeline-content:after {
display: none;
}
.su-timeline .su-timeline-row .su-timeline-icon.has-ta-icon {
top: 10px;
}
.su-timeline .su-timeline-row .su-timeline-icon {
top: 20px;
}
.su-timeline-time {
display: none;
}
.su-timeline .su-timeline-row .su-timeline-content .su-timeline-content-body {
padding: 25px 15px;
}
}<html><body></body></html>jQuery(document).ready(function($) {
var timelineAnimate;
timelineAnimate = function(elem) {
return jQuery(".su-timeline.animated .su-timeline-row").each(function(i) {
var bottom_of_object, bottom_of_window;
bottom_of_object = jQuery(this).position().top + jQuery(this).outerHeight();
bottom_of_window = jQuery(window).scrollTop() + jQuery(window).height();
if (bottom_of_window > bottom_of_object) {
return jQuery(this).addClass("active");
}
});
};
timelineAnimate();
return jQuery(window).scroll(function() {
return timelineAnimate();
});
});<?php
/**
* @package Shortcode Ultimate
* @author BdThemes http://www.bdthemes.com
* @copyright Copyright (C) BdThemes Ltd
* @license http://www.gnu.org/licenses/gpl.html GNU/GPL
*/
defined( '_JEXEC' ) or die( 'Restricted access' );
class Su_Shortcode_timeline_config extends Su_Data {
function __construct() {
parent::__construct();
}
static function get_config() {
return array(
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TIMELINE'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TIMELINE_DESC'),
'icon' => 'sort-amount-desc',
'type' => 'single',
'group' => 'gallery',
'atts' => array(
'source' => array(
'type' => 'article_source',
'default' => 'none',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_SOURCE'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TIMELINE_SOURCE_DESC')
),
'limit' => array(
'type' => 'slider',
'min' => -1,
'max' => 100,
'step' => 1,
'default' => 20,
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_ITEM_LIMIT'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TIMELINE_LIMIT_DESC')
),
'order' => array(
'type' => 'select',
'values' => array(
'' => 'Default',
'title' => 'Title',
'created' => 'Created Date',
'hits' => 'Hits',
'ordering' => 'Ordering'
),
'default' => 'created',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_ORDER'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_ORDER_DESCR'),
'child' => array(
'order_by' => array(
'type' => 'select',
'values' => array(
'asc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_ASC'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_DESC')
),
'default' => 'desc',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_ORDER_TYPE'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_ORDER_TYPE_DESC')
)
)
),
'image' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_IMAGE'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TIMELINE_IMAGE_DESC'),
'child' => array(
'highlight_year' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_HIGHTLIGHT_YEAR'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_HIGHTLIGHT_YEAR_DESC')
),
'read_more' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_READMORE'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_READMORE_DESC')
)
)
),
'intro_text' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_INTRO_TEXT'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_INTRO_TEXT_DESC'),
'child' => array(
'date' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_DATE'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_DATE_DESC')
),
'time' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TIME'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TIME_DESC')
)
)
),
'title' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TITLE'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TITLE_DESC'),
'child' => array(
'link_title' => array(
'type' => 'bool',
'default' => 'yes',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_LINK_TITLE'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_LINK_TITLE_DESC')
)
)
),
'before_text' => array(
'default' => '',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_BEFORE_TEXT'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_BEFORE_TEXT_DESC'),
'child' => array(
'after_text' => array(
'default' => '',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_AFTER_TEXT'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_AFTER_TEXT_DESC')
)
)
),
'scroll_reveal' => array(
'default' => '',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_SCROLL_REVEAL'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_SCROLL_REVEAL_DESC')
),
'class' => array(
'default' => '',
'name' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_CLASS'),
'desc' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_CLASS_DESC')
)
)
);
}
}
<html><body></body></html><?php
/**
* @package Shortcode Ultimate
* @author BdThemes http://www.bdthemes.com
* @copyright Copyright (C) BdThemes Ltd
* @license http://www.gnu.org/licenses/gpl.html GNU/GPL
*/
defined( '_JEXEC' ) or die( 'Restricted access' );
class Su_Shortcode_timeline extends Su_Shortcodes {
function __construct() {
parent::__construct();
}
public static function timeline($atts = null, $content = null) {
$atts = su_shortcode_atts(array(
'source' => '',
'limit' => 20,
'image' => 'yes',
'title' => 'yes',
'link_title' => 'yes',
'intro_text' => 'yes',
'date' => 'yes',
'time' => 'yes',
'read_more' => 'no',
'order' => 'created',
'order_by' => 'desc',
'highlight_year' => 'yes',
'icon_bg' => '',
'before_text' => '',
'after_text' => '',
'scroll_reveal' => '',
'class' => ''
), $atts, 'timeline');
$slides = (array) Su_Tools::get_slides($atts);
$return = '';
if ($atts['before_text']) {
$return .= '<div class="su-timeline-before-text"><span>'.$atts['before_text'].'</span></div>';
}
$date = date('Y');
$return .= '<div'.su_scroll_reveal($atts).' class="su-timeline animated ' . su_ecssc($atts) . '">';
if (count($slides)) {
$limit = 1;
foreach ($slides as $slide) {
$title = $slide['title'];
$icon = $title ? explode('|| fa-', $title) : array();
if (count($icon) == 2){
$title = trim($icon[0]);
$icon = '<i class="fa fa-'.trim($icon[1]).'"></i>';
} else {
$title = $slide['title'];
$icon = '<i class="fa fa-circle"></i>';
}
$has_icon = '';
if (isset($icon[1])) {
$has_icon = 'has-ta-icon';
}
$icon_bg = ($atts['icon_bg']) ? 'style="background-color:'.$atts['icon_bg'].';"' : '';
if ($date != JHTML::_('date', $slide['created'], "Y") && $atts['highlight_year'] == 'yes') {
$return .= '<div class="su-timeline-row su-timeline-has-year">'."\n";
$date = JHTML::_('date', $slide['created'], "Y");
$return .= '<div class="su-timeline-year"><span>'."\n";
$return .= $date . "\n";
$return .= '</span></div>'."\n";
} else {
$return .= '<div class="su-timeline-row">'."\n";
}
$return .= '<div class="su-timeline-icon '.$has_icon.'"><div class="bg-primary" '.$icon_bg.'>'.$icon.'</div></div>';
$return .= '<div class="su-timeline-time">';
if ($atts['date'] == 'yes') {
$return .= '<small>'.JHTML::_('date', $slide['created'], JText::_('DATE_FORMAT_LC3')).'</small>';
}
if ($atts['time'] == 'yes') {
$return .= JHTML::_('date', $slide['created'], "g:i A");
}
$return .= '</div>';
$return .= '<div class="su-timeline-content">'."\n";
$return .= '<div class="su-timeline-content-body">'."\n";
if ($atts['title'] === 'yes' and isset($slide['title'])) {
$return .= '<h3 class="su-timeline-item-title">';
if ($atts['link_title'] === 'yes') { $return .= '<a href="'. $slide['link'].'">'; }
$return .= $title;
if ($atts['link_title'] === 'yes') { $return .= '</a>'; }
$return .= '</h3>';
}
if ($slide['image'] and $atts['image'] === 'yes') {
$return .= '<div class="su-timeline-item-image"><img src="'. image_media($slide['image']).'" alt="" /></div>';
}
if ($atts['intro_text'] === 'yes' and isset($slide['introtext'])) {
$return .= '<div class="su-timeline-item-text">'.su_do_shortcode($slide['introtext']).'</div>';
}
if ($atts['read_more'] === 'yes') {
$return .= '<a class="su-timeline-readmore readon" href="'. $slide['link'].'">'.JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_READMORE').'</a>';
}
$return .= '</div>'."\n";
$return .= '</div>'."\n";
$return .= '</div>'."\n";
if ($limit++ == $atts['limit']) break;
}
$return .= '</div>';
if ($atts['after_text']) {
$return .= '<div class="su-timeline-after-text"><span>'.$atts['after_text'].'</span></div>';
}
suAsset::addFile('css', 'timeline.css', __FUNCTION__);
suAsset::addFile('js', 'timeline.js', __FUNCTION__);
}
else {
$return .= su_alert_box(JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_TIMELINE_NOT_WORK'), 'warning');
}
return $return;
}
}