fanwuyang
/
Wordpress-Slider
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
main
Fan-Wu Geoffrey Yang 3 years ago
commit 3a7bbce93c
5 changed files with 555 additions and 0 deletions
Show Stats Download Patch File Download Diff File

BIN
next.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
prev.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

86
slider_script.js
Unescape View File

@ -0,0 +1,86 @@
/*
* Created by: YaFedImYaEatIm.
* All creation credits belong to YaFedImApps.
*/
var ys_slider_no = 0;
var ys_slider_max_no = $(".ys-slide").length;
var timer;
var moving = false;
function gotoSlide(slide_no, force_left){
if (slide_no === "timer_increase"){//bad practice but :P IDC
slide_no = ys_slider_no + 1;
}
if (slide_no >= ys_slider_max_no){
slide_no = 0;
} else if (slide_no < 0){
slide_no = ys_slider_max_no - 1;
}
if (ys_slider_max_no > 1 && !moving && ys_slider_no !== slide_no){
moving = true;
$($(".ys-page-nav > span").get(slide_no)).addClass("ys-active");
$($(".ys-page-nav > span").get(ys_slider_no)).removeClass("ys-active");
//console.log("Slider incrementing!");
//hid one display the other TODO animate.
if ((slide_no > ys_slider_no || (ys_slider_no === ys_slider_max_no - 1 && slide_no === 0)) && force_left === false){
//show both
$($(".ys-slide").get(ys_slider_no)).css("display", "table");
$($(".ys-slide").get(slide_no)).css("display", "table");
var old_var = ys_slider_no;
$($(".ys-slide").get(ys_slider_no)).animate({left:"-=100%"},
{duration:1000, queue: false,
complete: function(){
$($(".ys-slide").get(old_var)).css("display", "none");
moving = false;
}});
$($(".ys-slide").get(slide_no)).css("left", "100%");
$($(".ys-slide").get(slide_no)).animate({left:"-=100%"},
{duration:1000, queue: false});
ys_slider_no = slide_no;
}else{
//show both
$($(".ys-slide").get(ys_slider_no)).css("display", "table");
$($(".ys-slide").get(slide_no)).css("display", "table");
var old_var = ys_slider_no;
$($(".ys-slide").get(ys_slider_no)).animate({left:"+=100%"},
{duration:1000, queue: false,
complete: function(){
$($(".ys-slide").get(old_var)).css("display", "none");
moving = false;
}});
$($(".ys-slide").get(slide_no)).css("left", "-100%");
$($(".ys-slide").get(slide_no)).animate({left:"+=100%"},
{duration:1000, queue: false});
ys_slider_no = slide_no;
}
}
}
function ys_prev_slide(){
gotoSlide(ys_slider_no - 1, true);
clearInterval(timer);
timer = setInterval(function(){gotoSlide("timer_increase", false);}, 10000);
}
function ys_next_slide(){
gotoSlide(ys_slider_no + 1, false);
clearInterval(timer);
timer = setInterval(function(){gotoSlide("timer_increase", false);}, 10000);
}
$(document).ready(function(){
var ys_slide = $(".ys-slide").get(0);
$(ys_slide).css("display", "table");
$($(".ys-page-nav > span").get(0)).addClass("ys-active");
timer = setInterval(function(){gotoSlide("timer_increase", false);}, 10000);
});

205
style.css
Unescape View File

@ -0,0 +1,205 @@
/*
Created by: YaFedImYaEatIm.
All creation credits belong to YaFedImApps.
*/
/*
Created on : 14/04/2017, 12:37:12 PM
Author : YaFedImYaEatIm
*/
.ys-slider{
position:relative;
padding: 0;
max-height:240px;
height:240px;
max-width:720px;
width:720px;
padding: 0 !important;
overflow:hidden;
}
.ys-slide{
left:0px;
top:0px;
width:660px;
max-width: 720px;
min-width:720px;
display:none;
position:absolute;
table-layout: fixed;
}
.ys-image{
display: table-cell;
width:180px;
max-width: 180px;
height:240px;
max-height:240px;
padding:0;
}
.ys-image > img{
margin: auto;
width:180px;
height:240px;
}
.ys-content{
width:180px;
height:240px;
display: table-cell;
width: 70%;
height: inherit;
vertical-align: top;
padding: 0px 20px;
}
.ys-content h2{
max-height: 31px;
}
.ys-content p{
max-height:90px;
height:90px;
text-align:justify;
}
.ys-slider-next{
cursor:pointer;
position:absolute;
height:80px;
width:40px;
top:80px;
right:0;
margin: auto 0;
z-index: 1;
background-color:#888888;
opacity: .4;
}
.ys-slider-next:hover{
opacity: .8;
}
.ys-slider-prev{
cursor:pointer;
position:absolute;
height:80px;
width:40px;
top:80px;
left:0;
margin: auto 0;
z-index: 1;
background-color:#888888;
opacity: .4;
}
.ys-slider-prev:hover{
opacity:.8;
}
.ys-read-more{
display:block;
text-align:right;
padding-bottom:30px;
padding-right:15px;
}
.ys-read-more > a{
background: #cccccc;
background-image: -webkit-linear-gradient(top, #cccccc, #bdbdbd);
background-image: -moz-linear-gradient(top, #cccccc, #bdbdbd);
background-image: -ms-linear-gradient(top, #cccccc, #bdbdbd);
background-image: -o-linear-gradient(top, #cccccc, #bdbdbd);
background-image: linear-gradient(to bottom, #cccccc, #bdbdbd);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #333333;
font-size: 13px;
padding: 8px 12px 8px 12px;
border: solid #b0a6b0 1px;
}
.ys-read-more > a:hover{
background: #b8b9ba;
background-image: -webkit-linear-gradient(top, #b8b9ba, #979ea3);
background-image: -moz-linear-gradient(top, #b8b9ba, #979ea3);
background-image: -ms-linear-gradient(top, #b8b9ba, #979ea3);
background-image: -o-linear-gradient(top, #b8b9ba, #979ea3);
background-image: linear-gradient(to bottom, #b8b9ba, #979ea3);
}
.ys-page-nav{
position: absolute;
bottom:15px;
text-align: center;
left:0;
right:0;
margin-left: auto;
margin-right:auto;
}
.ys-page-nav span:first-child{
margin-left:0px;
}
.ys-page-nav span{
cursor:pointer;
border-radius: 5px;
height:10px;
width:10px;
background-color: #888888;
display:inline-block;
margin-left: 5px;
}
.ys-active{
background-color: #CCCCCC !important;
}
@media only screen and (max-width: 768px) {
.ys-slider{
width:100%;
max-width:none;
max-height:600px;
height:600px;
}
.ys-slide{
width:100%;
min-width: 0;
max-width: none;
}
.ys-image{
display: block;
width:100%;
text-align:center;
max-width:none;
}
.ys-image img{
display:inline-block;
}
.ys-content{
display: block;
width: auto;
}
.ys-content h2{
text-align:center;
padding: 0 20px;
height:58px;
max-height:58px;
overflow:hidden;
}
.ys-content p{
height:160px;
max-height: 160px;
}
}

264
yafed-wp-slider.php
Unescape View File

@ -0,0 +1,264 @@
<?php
/*
Plugin Name: YaFed Slider Plugin
Description: YaFed's Slider Plugin for LNW
Author: YaFedImYaEatIm
Version: 1.1
*/
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Initialisers
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/**
* Initialise Function
*/
function ys_init() {
$args = array(
'public' => true,
'labels' => array('name' => __('YSlides'), 'singular_name' => __("YSlide"),
'add_new' => "Add New YSlide", "edit_item" => "Edit YSlide", "new_item" => "Add New YSlide",
"view_items" => "View YSlides"),
'supports' => array(
'title',
'thumbnail',
'editor'
)
);
add_image_size('ys_image', 180, 240);
register_post_type('ys_slides', $args);
add_shortcode('ys-shortcode', 'ys_function');
}
add_theme_support( 'post-thumbnails' );
add_action('init', 'ys_init');
/**
* Add to Page Function
*/
function ys_function($type='ys_image'){
$args = array(
'post_type' => 'ys_slides',
'posts_per_page' => 10,
'meta_key' => 'custom_ys_checkbox',
'meta_value' => 'on'
);
$result = '<div class="wrapper ys-slider">';
$result .= '<img src="'.plugins_url("/next.png", __FILE__).'" class="ys-slider-next" onclick="ys_next_slide();"/>';
$result .= '<img src="'.plugins_url("/prev.png", __FILE__).'" class="ys-slider-prev" onclick="ys_prev_slide();"/>';
//the loop
$loop = new WP_Query($args);
$num_posts = 0;
if ($loop->have_posts() ) :
while ($loop->have_posts()) : $loop->the_post();
$result .= '<div class="ys-slide">';
$result .= "<div class='ys-image'>";
$result .= get_the_post_thumbnail(null, 'ys_image');
$result .= "</div>";
$result .= "<div class='ys-content'>";
$result .= "<h2>".get_the_title().'</h2>';
$result .= "<hr/>";
$result .= "<p>".get_the_content()."</p>";
$result .= "<div>";
$result .= "<div class='ys-read-more'><a href='".get_post_meta(get_the_ID(), "custom_ys_url", true)."'>Read More...</a></div>";
$result .= "</div>";
$result .= "</div>";
$result .= '</div>';
$num_posts++;
endwhile;
endif;
if ($num_posts == 0){
$result .= '<div class="ys-slide">';
$result .= "<div class='ys-image'>";
$result .= "</div>";
$result .= "<div class='ys-content'>";
$result .= "<h2>Slides Missing</h2>";
$result .= "<hr/>";
$result .= "<p></p>";
$result .= "<div>";
$result .= "<div class='ys-read-more'></div>";
$result .= "</div>";
$result .= "</div>";
$result .= '</div>';
}
$result .= "<div class='ys-page-nav'>";
for ($i = 0; $i < $num_posts; $i ++){
$result .= "<span onclick='gotoSlide({$i}, false);'></span>";
}
$result .= "</div>";
$result .='</div>';
wp_reset_postdata();
return $result;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Widget
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
class ys_slider_widget extends WP_Widget{
public function __construct(){
parent::__construct('ys_slider_widget', 'YaFed WP Slider', array('description' => __('A Slider Carousel', 'text_domain')));
}
public function form($instance) {
if (isset($instance['title'])) {
$title = $instance['title'];
}
else {
$title = __('Widget Slideshow', 'text_domain');
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
</p>
<?php
}
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = strip_tags($new_instance['title']);
return $instance;
}
public function widget($args, $instance) {
extract($args);
// the title
$title = apply_filters('widget_title', $instance['title']);
echo $before_widget;
if (!empty($title))
echo $before_title . $title . $after_title;
echo ys_function('ys_image');
echo $after_widget;
}
}
function ys_widgets_init() {
register_widget('ys_slider_Widget');
}
add_action('widgets_init', 'ys_widgets_init');
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Custom Meta box
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Field Array
$prefix = 'custom_ys_';
$custom_meta_fields = array(
array(
'label'=> 'URL',
'desc' => '',
'id' => $prefix.'url',
'type' => 'text'
),
array(
'label'=> 'Display on Slider?',
'desc' => '',
'id' => $prefix.'checkbox',
'type' => 'checkbox'
)
);
// The Callback
function show_custom_meta_box() {
global $custom_meta_fields, $post;
// Use nonce for verification
echo '<input type="hidden" name="custom_ys_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />';
// Begin the field table and loop
echo '<table class="form-table">';
foreach ($custom_meta_fields as $field) {
// get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
// begin a table row with
echo '<tr>
<th><label for="'.$field['id'].'">'.$field['label'].'</label></th>
<td>';
switch($field['type']) {
// case items will go here
// // text
case 'text':
echo '<input type="text" name="'.$field['id'].'" id="'.$field['id'].'" value="'.$meta.'" size="20" />
<br /><span class="description">'.$field['desc'].'</span>';
break;
// checkbox
case 'checkbox':
echo '<input type="checkbox" name="'.$field['id'].'" id="'.$field['id'].'" ',$meta ? ' checked="checked"' : '','/>
<label for="'.$field['id'].'">'.$field['desc'].'</label>';
break;
} //end switch
echo '</td></tr>';
} // end foreach
echo '</table>'; // end table
}
// Add the Meta Box
function add_custom_meta_box() {
add_meta_box(
'custom_ys_slider_meta', // $id
'Show on Slider', // $title
'show_custom_meta_box', // $callback
'ys_slides', // $page
'side', // $context
'high'); // $priority
}
add_action('add_meta_boxes', 'add_custom_meta_box');
// Save the Data
function save_custom_meta($post_id) {
global $custom_meta_fields;
// verify nonce
if (!wp_verify_nonce($_POST['custom_ys_meta_box_nonce'], basename(__FILE__)))
return $post_id;
// check autosave
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return $post_id;
// check permissions
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id))
return $post_id;
} elseif (!current_user_can('edit_post', $post_id)) {
return $post_id;
}
// loop through fields and save the data
foreach ($custom_meta_fields as $field) {
$old = get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $field['id'], $new);
} elseif ('' == $new && $old) {
delete_post_meta($post_id, $field['id'], $old);
}
} // end foreach
}
add_action('save_post', 'save_custom_meta');
////////////////////////////////////////////////////////////////////////////////
//Carousel Style
////////////////////////////////////////////////////////////////////////////////
function register_ys_styles(){
wp_register_style( 'YS-CSS', plugins_url("/style.css", __FILE__), array(), '1.0', 'all');
wp_enqueue_style( 'YS-CSS' );
}
// Register style sheet.
add_action( 'wp_enqueue_scripts', "register_ys_styles");
/**
* Register JS functions
*/
function register_ys_scripts(){
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
wp_register_script('YSlider Script', plugins_url('/slider_script.js', __FILE__) , array('jquery'), '1.0', true);
wp_enqueue_script( 'YSlider Script' );
}
// Register Scripts
add_action( 'init', 'register_ys_scripts');
Write Preview
Loading…
Cancel
Save