Skip to content

Instantly share code, notes, and snippets.

@RishniMeemeduma

RishniMeemeduma/script.js

Last active January 16, 2019 15:58
Show Gist options
  • Save RishniMeemeduma/a861ff37c52b3514f90fd4be87f429de to your computer and use it in GitHub Desktop.
Save RishniMeemeduma/a861ff37c52b3514f90fd4be87f429de to your computer and use it in GitHub Desktop.
Download ZIP
wordpress plugins
Raw
script.js
// images data
var galleryTitle = 'Finance';
var imagesData =
[
{'imagePath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img1.jpg',
'thumbPath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img1_thumb.jpg',
'description': 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum'
},
{'imagePath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img2.jpg',
'thumbPath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img2_thumb.jpg',
'description': 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum'
},
{'imagePath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img3.jpg',
'thumbPath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img3_thumb.jpg',
'description': 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum'
},
{'imagePath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img4.jpg',
'thumbPath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img4_thumb.jpg',
'description': 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum'
},
{'imagePath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img5.jpg',
'thumbPath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img5_thumb.jpg',
'description': 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum'
},
{'imagePath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img6.jpg',
'thumbPath': 'http://sorgalla.com/jcarousel/examples/_shared/img/img6_thumb.jpg',
'description': 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum'
}
];
console.log(imagesData);
//
var connector = function (itemNavigation, carouselStage) {
return carouselStage.jcarousel('items').eq(itemNavigation.index());
};
$(function () {
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
// We loop through the items of the navigation carousel and set it up
// as a control for an item from the stage carousel.
carouselNavigation.jcarousel('items').each(function () {
var item = $(this);
// This is where we actually connect to items.
var target = connector(item, carouselStage);
item
.on('jcarouselcontrol:active', function () {
carouselNavigation.jcarousel('scrollIntoView', this);
item.addClass('active');
})
.on('jcarouselcontrol:inactive', function () {
item.removeClass('active');
})
.jcarouselControl({
target: target,
carousel: carouselStage
});
});
// Setup controls for the stage carousel
/*
$('.prev-stage')
.on('jcarouselcontrol:inactive', function () {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function () {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$('.next-stage')
.on('jcarouselcontrol:inactive', function () {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function () {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
*/
// Setup controls for the navigation carousel
$('.prev-navigation')
.on('jcarouselcontrol:inactive', function () {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function () {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '-=5'
});
$('.next-navigation')
.on('jcarouselcontrol:inactive', function () {
$(this).addClass('inactive');
})
.on('jcarouselcontrol:active', function () {
$(this).removeClass('inactive');
})
.jcarouselControl({
target: '+=5'
});
//update images from json
});
//json update images data
function reloadImages(){
// update the album title
$('.albumTitle').html(galleryTitle);
//get the images d into the li
var stageHtml = '<ul>', thumbHtml = '<ul>';
$.each(imagesData, function(i) {
stageHtml += '<li><img src="' + this.imagePath + '" alt="' + i + '"><p>'+this.description+'</p></li>';
thumbHtml += '<li><img src="' + this.thumbPath + '" alt="' + i + '"></li>';
});
stageHtml += '</ul>';
thumbHtml += '</ul>';
console.log(stageHtml);
console.log(thumbHtml);
$('.carousel-stage').html(stageHtml);
$('.carousel-navigation').html(thumbHtml);
// Reload carousel
carouselStage.carouselStage('reload');
carouselNavigation.carouselStage('reload');
}
reloadImages();
// });
Raw
style.css
/** Stage container **/
.connected-carousels .stage {
width: 620px;
margin: 20px auto;
position: relative;
}
.connected-carousels .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.connected-carousels .photo-credits a {
color: #fff;
}
/** Navigation container **/
.connected-carousels .navigation {
width: 620px;
margin: 20px auto;
position: relative;
}
/** Shared carousel styles **/
.connected-carousels .carousel {
overflow: hidden;
position: relative;
}
.connected-carousels .carousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.connected-carousels .carousel li {
float: left;
}
/** Stage carousel specific styles **/
.connected-carousels .carousel-stage {
height: 480px;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.connected-carousels .carousel-stage li > p{
width: 600px;
}
/** Navigation carousel specific styles **/
.connected-carousels .carousel-navigation {
height: 88px;
width: 600px;
background: #fff;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.connected-carousels .carousel-navigation li {
cursor: pointer;
}
.connected-carousels .carousel-navigation li img {
display: block;
border: 5px solid #fff;
}
.connected-carousels .carousel-navigation li.active img {
border-color: #ccc;
}
/** Stage carousel controls **/
.connected-carousels .prev-stage,
.connected-carousels .next-stage {
display: block;
position: absolute;
top: 0;
width: 305px;
height: 410px;
color: #fff;
}
.connected-carousels .prev-stage {
left: 0;
}
.connected-carousels .next-stage {
right: 0;
}
.connected-carousels .prev-stage.inactive,
.connected-carousels .next-stage.inactive {
display: none;
}
.connected-carousels .prev-stage span,
.connected-carousels .next-stage span {
display: none;
position: absolute;
top: 50%;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.connected-carousels .prev-stage span {
left: 20px;
}
.connected-carousels .next-stage span {
right: 20px;
}
.connected-carousels .prev-stage:hover span,
.connected-carousels .next-stage:hover span {
display: block;
}
/** Navigation carousel controls **/
.connected-carousels .prev-navigation,
.connected-carousels .next-navigation {
display: block;
position: absolute;
width: 30px;
height: 30px;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 16px/29px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.connected-carousels .prev-navigation {
left: -15px;
top: 22px;
text-indent: 6px;
}
.connected-carousels .next-navigation {
right: -15px;
top: 22px;
text-indent: 20px;
}
.connected-carousels .prev-navigation.inactive,
.connected-carousels .next-navigation.inactive {
opacity: .5;
cursor: default;
}
Raw
test.php
<?php
/*
Plugin Name: Test
Plugin URI: https://wordpress.com
Version: 1.0.0
Author: Rishni Meemeduma
License: GPLv2 or Later
*/
defined('ABSPATH') or die('you cannot access to this file');
function t_activate(){
if( ! current_user_can('activate_plugins')) return;
add_option('myplugin_posts_per_page',10);
add_option('myplugin_show_welcome_page',true);
}
register_activation_hook(__FILE__,'t_activate');
function t_deactivate(){
//wp_die('you are deactivated');
if(! current_user_can('activate_plugins')) return;
flush_rewrite_rules();
}
register_deactivation_hook(__FILE__,'t_deactivate');
function t_uninstall(){
if(! current_user_can('activate_plugins')) return;
delete_option('myplugin_posts_per_page',10);
delete_option('myplugin_show_welcome_page',true);
}
register_uninstall_hook(__FILE__,'t_uninstall');
/*********************** Add to admin menu *********************/
function admin_menu(){
add_menu_page('Test Plugin',
'Test',
'manage_options',
'test',
'setting_page_function',
4);
}
function setting_page_function(){
if(!current_user_can('manage_options')) return;
?>
<div class='wrap'>
<h2><?php echo esc_html(get_admin_page_title()); ?></h2>
<form action='options.php' method='post'>
<?php
settings_fields( 'pluginPage' );
do_settings_sections( 'pluginPage' );
submit_button();
?>
</form>
</div>
<?php
}
add_action('admin_menu','admin_menu');
add_action( 'admin_init', 'test_settings_init' );
function test_settings_init( ) {
register_setting( 'pluginPage', 'test_settings' );
add_settings_section(
'test_pluginPage_section',
__( 'Your section description', 'test' ),
'test_settings_section_callback',
'pluginPage'
);
add_settings_field(
'test_text_field_0',
__( 'Settings field description', 'test' ),
'test_text_field_0_render',
'pluginPage',
'test_pluginPage_section'
);
add_settings_field(
'test_select_field_1',
__( 'Settings field description', 'test' ),
'test_select_field_1_render',
'pluginPage',
'test_pluginPage_section'
);
}
function test_text_field_0_render( ) {
$options = get_option( 'test_settings' );
?>
<input type='text' name='test_settings[test_text_field_0]' value='<?php echo $options['test_text_field_0']; ?>'>
<?php
}
function test_select_field_1_render(){
$options = get_option('test_settings');
?>
<select name='test_settings[test_select_field_1]'>
<option value='1'>yes</option>
<option value='2'>No</option>
</select>
<?php
}
function test_settings_section_callback( ) {
echo 'This is a slider setting';
}
/*========================= Show slider on frontend ================*/
function show_frontend(){
$options = get_option( 'test_settings' );
$nav = $options['test_select_field_1'];
$slider =$options['test_text_field_0'];
$front='<div class="connected-carousels">
<div class="stage">
<h3 class="albumTitle"></h3>
<div class="carousel carousel-stage" data-jcarousel="true">
<div class="loading">Loading carousel items...</div>
</div>
<!--
<a href="#" class="prev prev-stage" data-jcarouselcontrol="true"><span>‹</span></a>
<a href="#" class="next next-stage" data-jcarouselcontrol="true"><span>›</span></a>
-->
</div>
<div class="navigation">';
if($nav == 1){
$front.='<a href="#" class="prev prev-navigation" data-jcarouselcontrol="true">‹</a>
<a href="#" class="next next-navigation inactive" data-jcarouselcontrol="true">›</a>';
}
$front.='<div class="carousel carousel-navigation" data-jcarousel="true">
<ul style="left: -116.79997634887695px; top: 0px;">
<li data-jcarouselcontrol="true" class=""><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true" class=""><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true" class="active"><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true" class=""><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true"><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li data-jcarouselcontrol="true"><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>';
return $front;
}
add_shortcode('slider','show_frontend');
/*======== Add setting page into plugin panel ===============*/
function add_setting_link($links){
$link=array('<a href="' . admin_url( 'admin.php?page=test' ) . '">Settings</a>', );
return array_merge($links,$link);
}
add_filter( 'plugin_action_links_' . plugin_basename(__FILE__), 'add_setting_link' );
/*****************************************************************/
/********* Added as a Post *************************************/
function custom_post_types(){
register_post_type('Test Post',array('label' => 'test','public'=> true) );
}
add_action('init','custom_post_types');
/**************************************************************/
/***************** add Javascript and css files front end********************/
function enqueue_files(){
wp_enqueue_script('mytestscript',plugin_dir_url(__FILE__).'script.js',array(),null,'all');
wp_enqueue_style('myteststyle',plugin_dir_url(__FILE__).'style.css',array(),null,'all');
}
add_action('wp_enqueue_scripts','enqueue_files');
/***************** add Javascript and css files Back end********************/
// function enqueue_files(){
// wp_enqueue_script('myscript','script.css');
// wp_enqueue_style('mystyle','style.css');
// }
// add_action('admin_enqueue_scripts','enqueue_files');
/**************** Show Posts to front end *******************/
function custom_loop_shortcode_get_posts($atts){
global $post;
extract(shortcode_atts( array(
'posts_per_page' => 5,
'offset' => 1,
'category' => 1,
'order_by' => 'date'
),$atts ));
$args = array('posts_per_page' => $posts_per_page,'order_by'=> $order_by);
$posts= get_posts($args);
foreach ( $posts as $post ) :
setup_postdata( $post ); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
endforeach;
wp_reset_postdata();
}
add_shortcode('example_posts','custom_loop_shortcode_get_posts');
/************* add only one custom post to front end *************/
function custom_loop_pre_get_post($query){
if(! is_admin() && $query-> is_main_query()){
//$query ->set('posts_per_page',1)
$query -> set('order','ASC');
}
}
add_action('pre_get_posts','custom_loop_pre_get_post');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment