コード例 #1
0
function build_lshowcase($order = "menu_order", $category = "", $activeurl = "new", $style = "normal", $interface = "grid", $tooltip = "false", $limit = -1, $slidersettings = "", $imgwo = 0, $ids = "0")
{
    global $lshowcase_slider_count;
    global $post;
    //will be used to include carousel code before tooltip code.
    $carousel = false;
    //image size override
    $imgwidth = "";
    if ($imgwo != "" && $imgwo != 0 && $imgwo != '0') {
        $imgwidth = explode(',', $imgwo);
    }
    $html = "";
    $thumbsize = "lshowcase-thumb";
    $class = "lshowcase-thumb";
    $divwrap = "lshowcase-wrap-normal";
    $divwrapextra = "";
    $divboxclass = "lshowcase-box-normal";
    $divboxinnerclass = "lshowcase-boxInner-normal";
    if ($order == 'none') {
        $order = 'menu_order';
    }
    if ($interface != "grid" && $interface != "hcarousel" && $interface != "vcarousel") {
        $columncount = substr($interface, 4);
        $divboxclass = "lshowcase-box-" . $columncount;
        $divboxinnerclass = "lshowcase-boxInner";
        $divwrap = "lshowcase-wrap-responsive";
    }
    if ($interface == "hcarousel") {
        $divwrapextra = "style='display:none;' class='lshowcase-wrap-carousel-" . $lshowcase_slider_count . "'";
        $class = "lshowcase-thumb";
        $divwrap = "lshowcase-wrap-normal";
        $divboxclass = "lshowcase-box-normal";
        $divboxinnerclass = "lshowcase-slide";
        $carousel = true;
        lshowcase_add_carousel_js();
    }
    $stylearray = lshowcase_styles_array();
    $class = $stylearray[$style]["class"];
    if ($style == 'jgrayscale') {
        lshowcase_add_grayscale_js();
    }
    //tooltip code
    if ($tooltip == 'true' || $tooltip == 'true-description') {
        $class .= " lshowcase-tooltip";
        lshowcase_add_tooltip_js($carousel);
    }
    $postsperpage = -1;
    $nopaging = true;
    if ($limit >= 1) {
        $postsperpage = $limit;
        $nopaging = false;
    }
    $ascdesc = 'DESC';
    if ($order == 'name' || $order == 'menu_order') {
        $ascdesc = 'ASC';
    }
    $args = array('post_type' => 'lshowcase', 'lshowcase-categories' => $category, 'orderby' => $order, 'order' => $ascdesc, 'posts_per_page' => $postsperpage, 'nopaging' => $nopaging, 'suppress_filters' => true);
    if ($ids != '0' && $ids != '') {
        $postarray = explode(',', $ids);
        if ($postarray[0] != '') {
            $args['post__in'] = $postarray;
        }
    }
    $loop = new WP_Query($args);
    // to force random again - uncomment in case random is not working
    // if($order=='rand' ) {
    // shuffle( $loop->posts );
    // }
    if (!$loop->have_posts()) {
        return "<!-- Empty Logos Showcase Container -->";
    }
    $html .= '<div class="lshowcase-clear-both">&nbsp;</div>';
    $html .= '<div class="lshowcase-logos"><div ' . $divwrapextra . ' >';
    while ($loop->have_posts()) {
        $loop->the_post();
        if (has_post_thumbnail()) {
            //check if there is img overide settings
            if (is_array($imgwidth)) {
                $thumbsize = $imgwidth;
            }
            $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $thumbsize);
            $lshowcase_options = get_option('lshowcase-settings');
            $width = $image[1];
            $height = " height = '" . $image[2] . "' ";
            $dwidth = $lshowcase_options['lshowcase_thumb_width'];
            $desc = get_post_meta(get_the_ID(), 'urldesc', true);
            //to filter the quotes and make them html compatible
            $desc = str_replace("'", '&apos;', $desc);
            if (is_array($imgwidth)) {
                $dwidth = $thumbsize[0];
            }
            if ($interface != "hcarousel") {
                $html .= "<div class='" . $divwrap . "'>";
                $html .= '<div class="' . $divboxclass . '">';
                $height = "";
            }
            if ($interface == "grid") {
                $html .= '<div class="' . $divboxinnerclass . '" style="width:' . $dwidth . 'px; align:center; text-align:center;">';
            } else {
                $html .= '<div class="' . $divboxinnerclass . '">';
            }
            $url = get_post_meta(get_the_ID(), 'urllink', true);
            //set default attributes for tooltip
            if ($tooltip == "true" || $tooltip == "false") {
                $alt = $desc;
                $title = the_title_attribute('echo=0');
            }
            //switch attributes to reflect on toolip
            if ($tooltip == "true-description") {
                $title = $desc;
                $alt = the_title_attribute('echo=0');
            }
            if ($activeurl != "inactive" && $url != "") {
                $target = "";
                if ($activeurl == "new") {
                    $target = "target='_blank'";
                }
                if ($activeurl == "new_nofollow") {
                    $target = "target='_blank' rel='nofollow'";
                }
                $html .= "<a href='" . $url . "' alt='" . $alt . "' " . $target . ">";
                $html .= "<img src='" . $image[0] . "' width='" . $width . "' " . $height . " alt='" . $alt . "' title='" . $title . "' class='" . $class . "' />";
                // $html .= get_the_post_thumbnail($post->ID,$thumbsize,array( 'class' => $class, 'alt'	=> $alt, 'title' => $title));
                $html .= "</a>";
            } else {
                $html .= "<img src='" . $image[0] . "' width='" . $width . "' " . $height . " alt='" . $alt . "' title='" . $title . "' class='" . $class . "' />";
                // $html .= get_the_post_thumbnail($post->ID,$thumbsize,array( 'class' => $class, 'alt'	=> $alt, 'title' => $title));
            }
            //uncomment if you want the description content to display below the images.
            //will not work well on responsive grid layout
            //$html .= "<div class='lshowcase-description'>".$desc."</div>";
            if ($interface != "hcarousel") {
                $html .= "</div></div>";
            }
            $html .= "</div>";
        }
    }
    // Restore original Post Data
    wp_reset_postdata();
    $html .= '</div></div><div class="lshowcase-clear-both">&nbsp;</div>';
    //Add Carousel Code
    if ($interface == 'hcarousel') {
        lshowcase_bxslider_options_js($lshowcase_slider_count, $slidersettings, $dwidth);
        $lshowcase_slider_count++;
    }
    lshowcase_add_main_css();
    return $html;
}
コード例 #2
0
 public function integrateWithVC()
 {
     // Check if Visual Composer is installed
     if (!defined('WPB_VC_VERSION') || !function_exists('vc_map')) {
         // Display notice that Visual Compser is required
         // add_action('admin_notices', array( $this, 'showVcVersionNotice' ));
         return;
     }
     if (function_exists('vc_map')) {
         $options = get_option('lshowcase-settings');
         $name = $options['lshowcase_name_singular'];
         $nameplural = $options['lshowcase_name_plural'];
         $terms = get_terms("lshowcase-categories");
         $count = count($terms);
         $categories = array();
         $categories['All'] = '0';
         if ($count > 0) {
             foreach ($terms as $term) {
                 $categories[$term->name] = $term->slug;
             }
         }
         $styles = array();
         $stylesarray = lshowcase_styles_array();
         foreach ($stylesarray as $option => $key) {
             $styles[$key['description']] = $option;
         }
         vc_map(array("name" => $nameplural, "description" => __("Insert " . $nameplural . " grid or carousel", 'lshowcase'), "base" => "show-logos", "class" => "", "front_enqueue_js" => plugins_url('includes/visual_composer.js', __FILE__), "icon" => plugins_url('images/icon64.png', __FILE__), "category" => __('Content', 'js_composer'), "params" => array(array("admin_label" => true, "type" => "dropdown", "holder" => "hidden", "class" => "", "heading" => __("Order by", 'lshowcase'), "param_name" => "orderby", "value" => array('Default' => 'none', 'ID' => 'id', 'Title' => 'title', 'Date' => 'date', 'Modified' => 'modified', 'Random' => 'rand'), "description" => __("Display entries ordered by", 'lshowcase')), array("admin_label" => true, "type" => "dropdown", "holder" => "hidden", "class" => "", "heading" => __("Category", 'lshowcase'), "param_name" => "category", "value" => $categories, "description" => __("Category to display", 'lshowcase')), array("admin_label" => true, "type" => "textfield", "holder" => "hidden", "class" => "", "heading" => __("Limit", 'lshowcase'), "param_name" => "limit", "value" => '0', "description" => __("How many entries to display. Leave blank or '0' to display all", 'lshowcase')), array("admin_label" => true, "type" => "dropdown", "holder" => "hidden", "class" => "", "heading" => __("URL", 'lshowcase'), "param_name" => "activeurl", "value" => array('Open in same window' => 'same', 'Inactive' => 'inactive', 'Open in new window' => 'new', 'Open in new window (nofollow)' => 'new_nofollow'), "description" => __("Image URL Settings", 'lshowcase')), array("admin_label" => true, "type" => "dropdown", "holder" => "hidden", "class" => "", "heading" => __("Style", 'lshowcase'), "param_name" => "style", "value" => $styles, "description" => __("Image effect to apply", 'lshowcase')), array("admin_label" => true, "type" => "dropdown", "holder" => "hidden", "class" => "", "heading" => __("Layout", 'lshowcase'), "param_name" => "interface", "value" => array('Normal Grid' => 'grid', 'Horizontal Carousel' => 'hcarousel', 'Responsive Grid - 12 Columns' => 'grid12', 'Responsive Grid - 11 Columns' => 'grid11', 'Responsive Grid - 10 Columns' => 'grid10', 'Responsive Grid - 9 Columns' => 'grid9', 'Responsive Grid - 8 Columns' => 'grid8', 'Responsive Grid - 7 Columns' => 'grid7', 'Responsive Grid - 6 Columns' => 'grid6', 'Responsive Grid - 5 Columns' => 'grid5', 'Responsive Grid - 4 Columns' => 'grid4', 'Responsive Grid - 3 Columns' => 'grid3', 'Responsive Grid - 2 Columns' => 'grid2', 'Responsive Grid - 1 Columns' => 'grid1'), "description" => __("In what form do you want the images to display", 'lshowcase')), array("admin_label" => true, "type" => "dropdown", "holder" => "hidden", "class" => "", "heading" => __("Show Tooltip", 'lshowcase'), "param_name" => "tooltip", "value" => array('No' => 'false', 'Show Title' => 'true', 'Show Description' => 'true-description'), "description" => __("Display tooltip information on hover", 'lshowcase')), array("admin_label" => true, "type" => "dropdown", "holder" => "hidden", "class" => "", "heading" => __("Show Info", 'lshowcase'), "param_name" => "description", "value" => array('No' => 'false', 'Title Below' => 'true', 'Description Below' => 'true-description', 'Title Above' => 'true-above', 'Description Above' => 'true-description-above', 'Title Above & Description Below' => 'true-title-above-description-below'), "description" => __("Display information above or below image", 'lshowcase')), array("admin_label" => true, "type" => "dropdown", "holder" => "hidden", "class" => "", "heading" => __("Show Filter", 'lshowcase'), "param_name" => "filter", "value" => array('No' => 'false', 'Hide Filter' => 'hide', 'Enhance Filter' => 'enhance'), "description" => __("Display live filter menu above grid", 'lshowcase')))));
     }
 }
コード例 #3
0
function lshowcase_shortcode_page()
{
    settings_fields('lshowcase-plugin-settings');
    $options = get_option('lshowcase-settings');
    ?>
	
<h1>Shortcode Generator</h1>
    
     
    <table cellpadding="10" cellspacing="10">
      <tr><td valign="top">
    <div class="postbox" style="width:300px;">
    <form id="shortcode_generator" style="padding:20px;">
           
<p>
        <label for="orderby">Order By:</label>
        <select id="orderby" name="orderby" onChange="lshowcaseshortcodegenerate()">
            <option value="none">Default (Order Field)</option>
            <option value="title">Title</option>
            <option value="ID">ID</option>
            <option value="date">Date</option>
            <option value="modified">Modified</option>
            <option value="rand">Random</option>
        </select></p>
 	 <p><label for="limit">Number of Images to display:</label><input size="3" id="limit" name="limit" type="text" value="0" onChange="lshowcaseshortcodegenerate()" /><span class="howto"> (Leave blank or 0 to display all)</span></p>
             Multiple Categories Selection <input name="multiple" type="checkbox" id="multiple" onChange="lshowcaseshortcodegenerate()" value="multiple">
<span id="multiplemsg" class="howto"></span>
<p><label for="category">Category</label>:
     
        <select id="category" name="category" onChange="lshowcaseshortcodegenerate()">
          <option value="0">All</option>
        
  <?php 
    $terms = get_terms("lshowcase-categories");
    $count = count($terms);
    if ($count > 0) {
        foreach ($terms as $term) {
            echo "<option value='" . $term->slug . "'>" . $term->name . "</option>";
        }
    }
    ?>
</select></p>
 <p>
            <label for="activeurl">URL:
            </label>
        <select id="activeurl" name="activeurl" onChange="lshowcaseshortcodegenerate()">
          <option value="inactive">Inactive</option>
          <option value="new" selected>Open in new window</option>
          <option value="new_nofollow">Open in new window (nofollow)</option>
          <option value="same">Open in same window</option>
        </select></p>
         
  
  
   <p>
     <label for="style">Style:</label>
        
        <select id="style" name="style" onChange="lshowcaseshortcodegenerate()">
          <?php 
    $stylesarray = lshowcase_styles_array();
    foreach ($stylesarray as $option => $key) {
        ?>
          
          <option value="<?php 
        echo $option;
        ?>
"><?php 
        echo $key['description'];
        ?>
</option>
          <?php 
    }
    ?>
		</select></p>

		<p>
		     <label for="tooltip">Show Tooltip:</label>
		       
		        <select id="tooltip" name="tooltip" onChange="lshowcaseshortcodegenerate()">
		          
		          <option value="false">No</option> 
		          <option value="true">Yes - Show Title</option> 
		          <option value="true-description">Yes - Show Description</option> 
		          
		</select>

		</p>

		<p>
		     <label for="description">Show Info:</label>
		       
		        <select id="description" name="description" onChange="lshowcaseshortcodegenerate()">
		          
		          <option value="false">No</option> 
		          <option value="true">Show Title Below</option> 
		          <option value="true-description">Show Description Below</option>
               <option value="true-above">Show Title Above</option>
                <option value="true-description-above">Show Description Above</option>
                 <option value="true-title-above-description-below">Show Title Above Description Below</option> 
		          
		</select>

		</p>

		

       
        <p>Layout:
          
          <select id="interface" name="interface" onChange="lshowcaseshortcodegenerate()">
          <option value="grid" selected>Normal Grid</option>
          <option value="hcarousel" >Horizontal Carousel</option>
          <option value="grid12" >Responsive Grid - 12 Columns</option> 
          <option value="grid11" >Responsive Grid - 11 Columns</option>
          <option value="grid10" >Responsive Grid - 10 Columns</option>
          <option value="grid9" >Responsive Grid - 9 Columns</option>
          <option value="grid8" >Responsive Grid - 8 Columns</option>
          <option value="grid7" >Responsive Grid - 7 Columns</option> 
          <option value="grid6" >Responsive Grid - 6 Columns</option> 
          <option value="grid5" >Responsive Grid - 5 Columns</option>  
          <option value="grid4" >Responsive Grid - 4 Columns</option>
          <option value="grid3" >Responsive Grid - 3 Columns</option>
          <option value="grid2" >Responsive Grid - 2 Columns</option>
          <option value="grid1" >Responsive Grid - 1 Columns</option>     
          
</select></p>

<div id="ls_filter_option">

   <label for="filter">Show Filter Menu:</label>

<select id="filter" name="filter" onChange="lshowcaseshortcodegenerate()">
              
              <option value="false">No</option> 
              <option value="hide">Hide Filter</option> 
              <option value="enhance">Enhance Filter</option> 
              
    </select>


</div>

<div id="ls_carousel_type">
	<p id="ls_carousel_settings_option" style="display:none;">
		<label for="">Carousel Settings: </label>
		<input name="use_defaults" id="use_defaults" type="radio" value="1" checked="checked" onclick="hidecustomsettings();" />
              Default
                <input name="use_defaults" id="use_defaults" type="radio" value="0" onclick="showcustomsettings();" />
              Custom
	</p>
	<div id="ls_carousel_settings" style="display:none; background:#FFF; padding:5px;"> 
		
<table width="100%">
  <tr>
    <td nowrap >Auto Scroll</td>
    <td><select name="lshowcase_carousel_autoscroll" onChange="lshowcaseshortcodegenerate()">
      <option value="true"  <?php 
    selected($options['lshowcase_carousel_autoscroll'], 'true');
    ?>
>Yes - With Pause</option>
      <option value="ticker"  <?php 
    selected($options['lshowcase_carousel_autoscroll'], 'ticker');
    ?>
>Yes - Non Stop</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_autoscroll'], 'false');
    ?>
>No</option>
    </select></td>
  
  
  </table>
  <table width="100%" id="lst_pause_time">
  
  <tr>
    <td nowrap >Pause Time</td>
    <td><input type="text" name="lshowcase_carousel_pause" value="<?php 
    echo $options['lshowcase_carousel_pause'];
    ?>
" onChange="lshowcaseshortcodegenerate()" size="10" /></td>
  </tr><tr><td colspan="2"><span class="howto">The amount of time (in ms) between each auto transition</span></td>
  </tr>
  </table>
  <table width="100%" id="lst_pause_hover">
  <tr>
    <td nowrap >Pause on Hover</td>
    <td><select name="lshowcase_carousel_autohover" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_autohover'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_autohover'], 'false');
    ?>
>No</option>
    </select></td>
  </tr><tr><td colspan="2"><span class="howto">Auto scroll will pause when mouse hovers over slider</span></td>
  </tr>
  
  </table>
  <table width="100%" id="lst_auto_controls">
  
  <tr>
    <td nowrap >Auto Controls</td>
    <td><select name="lshowcase_carousel_autocontrols" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_autocontrols'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_autocontrols'], 'false');
    ?>
>No</option>
    </select></td>
  </tr><tr><td colspan="2"><span class="howto">If active, "Start" / "Stop" controls will be added</span></td>
  </tr>
  
  </table>
  <table width="100%">
  
  <tr>
    <td nowrap >Transition Speed:</td>
    <td><input type="text" name="lshowcase_carousel_speed" value="<?php 
    echo $options['lshowcase_carousel_speed'];
    ?>
" onChange="lshowcaseshortcodegenerate()" size="10" /></td>
  </tr><tr><td colspan="2"><span class="howto">Slide transition duration (in ms - intenger) </span></td>
  </tr>
  <tr>
    <td nowrap >Image Margin:</td>
    <td><input type="text" size="10" name="lshowcase_carousel_slideMargin" value="<?php 
    echo $options['lshowcase_carousel_slideMargin'];
    ?>
" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">Margin between each image (intenger)</span></td>
  </tr>
  </table>
  <table width="100%" id="lst_carousel_common_settings">
  <tr>
    <td nowrap >Infinite Loop:</td>
    <td><select name="lshowcase_carousel_infiniteLoop" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_infiniteLoop'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_infiniteLoop'], 'false');
    ?>
>No</option>
    </select></td>

  <tr>
    <td nowrap >Show Pager:</td>
    <td><select name="lshowcase_carousel_pager" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_pager'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_pager'], 'false');
    ?>
>No</option>
    </select></td>
  </tr><tr><td colspan="2"><span class="howto">If Active, a pager will be added.</span></td>
  </tr>
  <tr>
    <td nowrap >Show Controls:</td>
    <td><select name="lshowcase_carousel_controls" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_controls'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_controls'], 'false');
    ?>
>No</option>
    </select></td>
  </tr><tr><td colspan="2"><span class="howto">If Active, "Next" / "Prev" image controls will be added.</span></td>
  </tr>

<?php 
    if (isset($options['lshowcase_carousel_mode']) && $options['lshowcase_carousel_mode'] != 'horizontal') {
        ?>
<tr>
    <td colspan="2" ><span style="color:red;">Atention: the transition mode in the settings is not 'horizontal'. The settings below will be ignored and only 1 slide will display at a time.<span></td>
   
  </tr>
	<?php 
    }
    ?>

  <tr>
    <td nowrap >Minimum Slides:</td>
    <td><input size="10" type="text" name="lshowcase_carousel_minSlides" value="<?php 
    echo $options['lshowcase_carousel_minSlides'];
    ?>
" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">The minimum number of slides to be shown.</span></td>
  </tr>
  <tr>
    <td nowrap >Maximum Slides:</td>
    <td><input size="10" type="text" name="lshowcase_carousel_maxSlides" value="<?php 
    echo $options['lshowcase_carousel_maxSlides'];
    ?>
" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">The maximum number of slides to be shown. (place 0 to let the script calculate the maximum number of slides that fit the viewport)</span></td>
  </tr>
  <tr>
    <td nowrap >Slides to move:</td>
    <td><input size="10" type="text" name="lshowcase_carousel_moveSlides" value="<?php 
    echo $options['lshowcase_carousel_moveSlides'];
    ?>
" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">The number of slides to move on transition.  If zero, the number of fully-visible slides will be used.</span></td>
</tr>
</table>



	</div>

	<table width="100%" style="border-top:1px dashed #CCC; margin-top:20px; padding:10px;">
<tr>
    <td nowrap >Image Size Override:</td>
    <td><input size="10" type="text" name="lshowcase_image_size_overide" value="" size="10" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">Leave blank to use default values.
In case you want to override the default image size settings, use this field to put the width and height values in the following format: width,height
ex. 100,100.
Smallest value will prevail if images don't have exactly this size. Images might be scaled. (In the Responsive Grid Layout this option won't take effect)</span></td>
</tr>

</table>

<table width="100%" style="border-top:1px dashed #CCC; margin-top:20px; padding:10px;">


<tr>
    <td nowrap >CSS Class:</td>
    <td><input size="10" type="text" name="lshowcase_wrap_class" id="lshowcase_wrap_class" value="" size="10" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">Set a custom css class for the this layout wrapping div</span></td>
</tr>




</table>

</div>

</form>
    </div>
    </td><td valign="top"><h3>Shortcode</h3> 
    Use this shortcode to display the list of logos in your posts or pages! Just copy this piece of text and place it where you want it to display.
    
    <div id="shortcode_div" style="padding:10px; background-color:#fff;border-left:4px solid #7ad03a;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 1px 0 rgba(0,0,0,.1); display:block;">
       <textarea id="shortcode" style="width:100%; height:55px;"></textarea>
    </div>
    
    <h3>PHP Function</h3>
    Use this PHP function to display the list of logos directly in your theme files!
    <div id="phpcode_div" style="padding:10px; background-color:#fff;border-left:4px solid #7ad03a;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 1px 0 rgba(0,0,0,.1)"> 

       <textarea id="phpcode" style="width:100%; height:55px;"></textarea>

    </div>
    
    <h3> Preview</h3>
      
	<div id="preview"></div>
    <div id="hcarouselhelp"><i class="fa fa-exclamation-triangle"></i> The carousel layout uses Javascript/jQuery. If the carousel does not display when using the shortcode there is most likely a javascript error in your page code that is preventing the carousel functions from initiating properly. Usually it's a conflict with other plugins. <br> Please <a href="http://cmoreira.net/logos-showcase/carousel-issues/" target="_blank">visit this page for information on how to solve possible issues.</a></div>
    
      </td></tr></table>
    
    
<?php 
    $options = get_option('lshowcase-settings');
    $mode = isset($options['lshowcase_carousel_mode']) ? "'" . $options['lshowcase_carousel_mode'] . "'" : "'horizontal'";
    $slidewidth = $options['lshowcase_thumb_width'];
    $autoscroll = $options['lshowcase_carousel_autoscroll'];
    $pausetime = $options['lshowcase_carousel_pause'];
    $autohover = $options['lshowcase_carousel_autohover'];
    $pager = $options['lshowcase_carousel_pager'];
    $tickerhover = $autohover;
    $ticker = 'false';
    $usecss = 'true';
    $auto = 'true';
    if ($autoscroll == 'false') {
        $auto = 'false';
    }
    if ($autoscroll == 'ticker') {
        $ticker = 'true';
        $tickerhover = $autohover;
        $autoscroll = 'true';
        $pager = 'false';
        $auto = 'false';
        if ($tickerhover == 'true') {
            $usecss = 'false';
        }
    }
    $autocontrols = $options['lshowcase_carousel_autocontrols'];
    $speed = $options['lshowcase_carousel_speed'];
    $slidemargin = $options['lshowcase_carousel_slideMargin'];
    $loop = $options['lshowcase_carousel_infiniteLoop'];
    $controls = $options['lshowcase_carousel_controls'];
    $minslides = $options['lshowcase_carousel_minSlides'];
    $maxslides = $options['lshowcase_carousel_maxSlides'];
    $moveslides = $options['lshowcase_carousel_moveSlides'];
    ?>
<script type="text/javascript">

	
	
	function checkslider()
	{
	
		 
		 var layout = document.getElementById( 'interface' ).value;

		 

		if(document.getElementsByName('use_defaults')[1].checked) { 

			
			var slidewidth = <?php 
    echo $slidewidth;
    ?>
;

			var imgwo = document.getElementsByName('lshowcase_image_size_overide')[0].value;
			if (imgwo!="") {

				 var imgwarray = imgwo.split(",");
				 slidewidth = parseInt(imgwarray[0]);
			};

			var autoscroll = document.getElementsByName('lshowcase_carousel_autoscroll')[0].value;
			var pause = parseInt(document.getElementsByName('lshowcase_carousel_pause')[0].value);
			
			var autohover = (document.getElementsByName('lshowcase_carousel_autohover')[0].value === 'true');
			var pager = (document.getElementsByName('lshowcase_carousel_pager')[0].value === 'true');

			

			var tickerhover = autohover;
			var ticker = false;			
			var usecss = true;
			var auto = true;

			var mode = <?php 
    echo $mode;
    ?>
;

			if (autoscroll == 'false') {
				auto = false;
			}

			if (autoscroll=='ticker') {
				ticker = true;
				tickerhover = autohover;
				pager = false;
				auto = false;
				
				if (tickerhover==true) {
					usecss = false;
				} 
			}


			var autocontrols = (document.getElementsByName('lshowcase_carousel_autocontrols')[0].value === 'true');
			var speed = parseInt(document.getElementsByName('lshowcase_carousel_speed')[0].value);
			var slidemargin = parseInt(document.getElementsByName('lshowcase_carousel_slideMargin')[0].value);
			var infiniteloop = (document.getElementsByName('lshowcase_carousel_infiniteLoop')[0].value === 'true');
			
			var controls = (document.getElementsByName('lshowcase_carousel_controls')[0].value === 'true');
			var minslides = parseInt(document.getElementsByName('lshowcase_carousel_minSlides')[0].value);
			var maxslides = parseInt(document.getElementsByName('lshowcase_carousel_maxSlides')[0].value);
			var moveslides = parseInt(document.getElementsByName('lshowcase_carousel_moveSlides')[0].value);

		}


		else {


			 var mode = <?php 
    echo $mode;
    ?>
;
			 var slidewidth = <?php 
    echo $slidewidth;
    ?>
;
			 var auto = <?php 
    echo $auto;
    ?>
;
			 var pause = <?php 
    echo $pausetime;
    ?>
;
			 var autohover = <?php 
    echo $autohover;
    ?>
;
			 var ticker = <?php 
    echo $ticker;
    ?>
;
			 var tickerhover = <?php 
    echo $tickerhover;
    ?>
;
			 var usecss = <?php 
    echo $usecss;
    ?>
;
			 var autocontrols = <?php 
    echo $autocontrols;
    ?>
;
			 var speed = <?php 
    echo $speed;
    ?>
;
			 var slidemargin = <?php 
    echo $slidemargin;
    ?>
;
			 var infiniteloop = <?php 
    echo $loop;
    ?>
 ;
			 var pager = <?php 
    echo $pager;
    ?>
;
			 var controls = <?php 
    echo $controls;
    ?>
;		 
			 var minslides = <?php 
    echo $minslides;
    ?>
;
			 var maxslides = <?php 
    echo $maxslides;
    ?>
;
			 var moveslides = <?php 
    echo $moveslides;
    ?>
;
		}
	
	if(layout=="hcarousel" ) {

		 var sliderDiv = jQuery( '.lshowcase-wrap-carousel-0' );

		 if(maxslides==0) {

			 	var view_width = sliderDiv.parent().width();

			 	if(controls == true ) { view_width = view_width-70; }

				 var slider_real = slidemargin + slidewidth;
				 maxslides = Math.floor(view_width/slider_real);

			 }

		sliderDiv.css({display:'block'});
			
		sliderDiv.bxSlider({
		
			auto: auto,		
			pause: pause,
			autoHover: autohover,
			ticker: ticker,
			tickerHover: tickerhover,
			useCSS: usecss,
			autoControls: autocontrols,
			mode: mode,
			speed: speed,
			slideMargin: slidemargin,
			infiniteLoop: infiniteloop,
		    pager: pager, 
			controls: controls,
		    slideWidth: slidewidth,
		    minSlides: minslides,
		    maxSlides: maxslides,
		    moveSlides: moveslides,
		    autoDirection: 'next',	//change to 'prev' if you want to reverse order
		    onSliderLoad: function(currentIndex){ 

		    	var sli = jQuery('.lshowcase-logos .bx-wrapper');
		    	var marg = '0 35px';

		    	if(controls == false ) { marg = 'none'; }

		    	sli.css({
				margin: marg
				}); 

		    	jQuery('.lshowcase-logos').css({
				maxWidth: sli.width()+80
				}); 

           //to align elements in the center in ticker
           /*
          We change the class, becasue the lshowcase-slide has a float:none!important that breaks
          the ticker code. 
           */
             if(ticker) {

              sliderheight = sliderDiv.parent().height();
              console.log(sliderheight);

                      if(sliderheight>0) {
                        sliderDiv.find(".lshowcase-slide")
                        .addClass('lshowcase-ticker-slide')
                        .removeClass('lshowcase-slide')
                        .css("height",sliderheight + 'px');
                      }
            
             }
		    	}  	

			});
		}

		
	}
	
	
	function checktooltip() {
		
	var tooltip = document.getElementById( 'tooltip' ).value;
	
	if(tooltip=="true" || tooltip=="true-description") {
		
			jQuery( '.lshowcase-tooltip' ).tooltip({
			content: function () { return jQuery(this).attr('title') },
    close: function( event, ui ) {
          ui.tooltip.hover(
              function () {
                  jQuery(this).stop(true).fadeTo(400, 1); 
                  //.fadeIn("slow"); // doesn't work because of stop()
              },
              function () {
                  jQuery(this).fadeOut("400", function(){ jQuery(this).remove(); })
              }
          );
        },
			position: {
			my: "center bottom-20",
			at: "center top",
			using: function( position, feedback ) {
			jQuery( this ).css( position );
			jQuery( "<div>" )
			.addClass( "lsarrow" )
			.addClass( feedback.vertical )
			.addClass( feedback.horizontal )
			.appendTo( this );
			}
			}
			});
		}

	}

	function checkgrayscale() {
		
		
		jQuery(".lshowcase-jquery-gray").fadeIn(500);
		
		// clone image
		jQuery('.lshowcase-jquery-gray').each(function(){
			var el = jQuery(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('ls_img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
				var el = jQuery(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = check_ls_grayscale(this.src);
		});
		
		// Fade image 
		jQuery('.lshowcase-jquery-gray').mouseover(function(){
			jQuery(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
		})
		jQuery('.ls_img_grayscale').mouseout(function(){
			jQuery(this).stop().animate({opacity:0}, 1000);
		});		
	
	}

	// Grayscale effect with canvas method
	function check_ls_grayscale(src){

		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var imgObj = new Image();
		imgObj.src = src;
		canvas.width = imgObj.width;
		canvas.height = imgObj.height; 
		ctx.drawImage(imgObj, 0, 0); 
		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
		return canvas.toDataURL();

    }
	
	
	
	 </script>
     <?php 
}
コード例 #4
0
    public function form($instance)
    {
        $instance = wp_parse_args((array) $instance, array('title' => '', 'orderby' => 'menu_order', 'category' => '0', 'style' => 'normal', 'interface' => 'grid', 'activeurl' => '1', 'tooltip' => 'false', 'description' => 'false', 'limit' => '0', 'filter' => 'false', 'class' => ''));
        $title = strip_tags($instance['title']);
        $orderby = strip_tags($instance['orderby']);
        $category = $instance['category'];
        $style = strip_tags($instance['style']);
        $interface = strip_tags($instance['interface']);
        $activeurl = $instance['activeurl'];
        $tooltip = $instance['tooltip'];
        $description = $instance['description'];
        $limit = $instance['limit'];
        $filter = $instance['filter'];
        $class = $instance['class'];
        ?>
        <p><label for="<?php 
        echo $this->get_field_id('title');
        ?>
">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>
 
        
<p>
        <label for="<?php 
        echo $this->get_field_id('orderby');
        ?>
">Order By:<br />
        </label>
        <select id="<?php 
        echo $this->get_field_id('orderby');
        ?>
" name="<?php 
        echo $this->get_field_name('orderby');
        ?>
">
            <option value="menu_order" <?php 
        selected($orderby, 'menu_order');
        ?>
>Default</option>
            <option value="name" <?php 
        selected($orderby, 'name');
        ?>
>Title</option>
            <option value="ID" <?php 
        selected($orderby, 'ID');
        ?>
>ID</option>
            <option value="date" <?php 
        selected($orderby, 'date');
        ?>
>Date</option>
            <option value="modified" <?php 
        selected($orderby, 'modified');
        ?>
>Modified</option>
            <option value="rand" <?php 
        selected($orderby, 'rand');
        ?>
>Random</option>
        </select></p>
        
              <p><label for="<?php 
        echo $this->get_field_id('limit');
        ?>
">Number of Images to display:</label><br />

        <input size="3" id="<?php 
        echo $this->get_field_id('limit');
        ?>
" name="<?php 
        echo $this->get_field_name('limit');
        ?>
" type="text" value="<?php 
        echo esc_attr($limit);
        ?>
" /><span class="howto"> (Leave blank or 0 to display all)</span></p>
 	
    
<p><label for="<?php 
        echo $this->get_field_id('category');
        ?>
">Category</label>
     :
       <br />
        <select id="<?php 
        echo $this->get_field_id('category');
        ?>
" name="<?php 
        echo $this->get_field_name('category');
        ?>
">
          <option value="0" <?php 
        selected($category, '0');
        ?>
>All</option>
        
  <?php 
        $terms = get_terms("lshowcase-categories");
        $count = count($terms);
        if ($count > 0) {
            foreach ($terms as $term) {
                echo "<option value='" . $term->slug . "'" . selected($category, $term->slug) . ">" . $term->name . "</option>";
            }
        }
        ?>
</select></p>
        
        
        

  
  
          <p>
            <label for="<?php 
        echo $this->get_field_id('activeurl');
        ?>
">URL:<br />
            </label>
        <select id="<?php 
        echo $this->get_field_id('activeurl');
        ?>
" name="<?php 
        echo $this->get_field_name('activeurl');
        ?>
">
          <option value="inactive" <?php 
        selected($activeurl, 'inactive');
        ?>
>Inactive</option>
          <option value="new" <?php 
        selected($activeurl, 'new');
        ?>
>Open in new window</option>
		<option value="new_nofollow" <?php 
        selected($activeurl, 'new_nofollow');
        ?>
>Open in new window (nofollow)</option>
          <option value="same" <?php 
        selected($activeurl, 'same');
        ?>
>Open in same window</option>
        </select></p>
         
  
  
   <p>
     <label for="<?php 
        echo $this->get_field_id('style');
        ?>
">Style:</label>
        <br />
        <select id="<?php 
        echo $this->get_field_id('style');
        ?>
" name="<?php 
        echo $this->get_field_name('style');
        ?>
">
          
          <?php 
        $stylesarray = lshowcase_styles_array();
        foreach ($stylesarray as $option => $key) {
            ?>
          
          <option value="<?php 
            echo $option;
            ?>
" <?php 
            selected($style, $option);
            ?>
><?php 
            echo $key['description'];
            ?>
</option>
          <?php 
        }
        ?>
          
</select></p>
       
        <p>Layout:
          <br />
          <select id="<?php 
        echo $this->get_field_id('interface');
        ?>
" name="<?php 
        echo $this->get_field_name('interface');
        ?>
">
          <option value="hcarousel" <?php 
        selected($interface, 'hcarousel');
        ?>
>Horizontal Carousel</option>
          <option value="grid" <?php 
        selected($interface, 'grid');
        ?>
>Normal Grid</option>
          <option value="grid12" <?php 
        selected($interface, 'grid12');
        ?>
>Responsive Grid - 12 Columns</option> 
          <option value="grid11" <?php 
        selected($interface, 'grid11');
        ?>
>Responsive Grid - 11 Columns</option>
          <option value="grid10" <?php 
        selected($interface, 'grid10');
        ?>
>Responsive Grid - 10 Columns</option>
          <option value="grid9" <?php 
        selected($interface, 'grid9');
        ?>
>Responsive Grid - 9 Columns</option>
          <option value="grid8" <?php 
        selected($interface, 'grid8');
        ?>
>Responsive Grid - 8 Columns</option> 
          <option value="grid7" <?php 
        selected($interface, 'grid7');
        ?>
>Responsive Grid - 7 Columns</option>
          <option value="grid6" <?php 
        selected($interface, 'grid6');
        ?>
>Responsive Grid - 6 Columns</option> 
          <option value="grid5" <?php 
        selected($interface, 'grid5');
        ?>
>Responsive Grid - 5 Columns</option>  
          <option value="grid4" <?php 
        selected($interface, 'grid4');
        ?>
>Responsive Grid - 4 Columns</option>
          <option value="grid3" <?php 
        selected($interface, 'grid3');
        ?>
>Responsive Grid - 3 Columns</option>
          <option value="grid2" <?php 
        selected($interface, 'grid2');
        ?>
>Responsive Grid - 2 Columns</option>
          <option value="grid1" <?php 
        selected($interface, 'grid1');
        ?>
>Responsive Grid - 1 Columns</option>     
          
</select></p>
       
       <p>
     <label for="<?php 
        echo $this->get_field_id('tooltip');
        ?>
">Show Tooltip:</label>
        <br />
        <select id="<?php 
        echo $this->get_field_id('tooltip');
        ?>
" name="<?php 
        echo $this->get_field_name('tooltip');
        ?>
">
          <option value="true" <?php 
        selected($tooltip, 'true');
        ?>
>Yes - Title</option>
 		
 		<option value="true-description" <?php 
        selected($tooltip, 'true-description');
        ?>
>Yes - Description</option>

          <option value="false" <?php 
        selected($tooltip, 'false');
        ?>
>No</option>  
          
</select></p>

 <p>
     <label for="<?php 
        echo $this->get_field_id('description');
        ?>
">Show Info:</label>
        <br />
        <select id="<?php 
        echo $this->get_field_id('description');
        ?>
" name="<?php 
        echo $this->get_field_name('description');
        ?>
">
          <option value="true" <?php 
        selected($description, 'true');
        ?>
>Title Below</option>
 		
 		<option value="true-description" <?php 
        selected($description, 'true-description');
        ?>
>Description Below</option>

		<option value="true-above" <?php 
        selected($description, 'true-above');
        ?>
>Title Above</option>  

		<option value="true-description-above" <?php 
        selected($description, 'true-description-above');
        ?>
>Description Above</option>  

		<option value="true-description-above" <?php 
        selected($description, 'true-title-above-description-below');
        ?>
>Title Above & Description Below</option>  

          <option value="false" <?php 
        selected($description, 'false');
        ?>
>No</option>  
          
</select></p>

<p>
     <label for="<?php 
        echo $this->get_field_id('filter');
        ?>
">Show Filter Menu:</label>
        <br />
        <select id="<?php 
        echo $this->get_field_id('filter');
        ?>
" name="<?php 
        echo $this->get_field_name('filter');
        ?>
">
          <option value="false" <?php 
        selected($filter, 'false');
        ?>
>No</option>
 		
 		 <option value="hide" <?php 
        selected($filter, 'hide');
        ?>
>Hide Filter</option>
		 <option value="enhance" <?php 
        selected($filter, 'enhance');
        ?>
>Enhance Filter</option>
          
</select></p>
 <p><label for="<?php 
        echo $this->get_field_id('class');
        ?>
">CSS Class:</label>
        <input class="widefat" id="<?php 
        echo $this->get_field_id('class');
        ?>
" name="<?php 
        echo $this->get_field_name('class');
        ?>
" type="text" value="<?php 
        echo esc_attr($class);
        ?>
" /></p>
       
        <?php 
    }
コード例 #5
0
function lshowcase_shortcode_page()
{
    settings_fields('lshowcase-plugin-settings');
    $options = get_option('lshowcase-settings');
    ?>
	
<h1>Shortcode Generator</h1>
    
     
    <table cellpadding="10" cellspacing="10">
      <tr><td valign="top">
    <div class="postbox" style="width:300px;">
    <form id="shortcode_generator" style="padding:20px;">
           
<p>
        <label for="orderby">Order By:</label>
        <select id="orderby" name="orderby" onChange="lshowcaseshortcodegenerate()">
            <option value="none">Default (Order Field)</option>
            <option value="name">Title</option>
            <option value="ID">ID</option>
            <option value="date">Date</option>
            <option value="modified">Modified</option>
            <option value="rand">Random</option>
        </select></p>
 	 <p><label for="limit">Number of Images to display:</label><input size="3" id="limit" name="limit" type="text" value="0" onChange="lshowcaseshortcodegenerate()" /><span class="howto"> (Leave blank or 0 to display all)</span></p>
             Multiple Categories Selection <input name="multiple" type="checkbox" id="multiple" onChange="lshowcaseshortcodegenerate()" value="multiple">
<span id="multiplemsg" class="howto"></span>
<p><label for="category">Category</label>:
     
        <select id="category" name="category" onChange="lshowcaseshortcodegenerate()">
          <option value="0">All</option>
        
  <?php 
    $terms = get_terms("lshowcase-categories");
    $count = count($terms);
    if ($count > 0) {
        foreach ($terms as $term) {
            echo "<option value='" . $term->slug . "'>" . $term->name . "</option>";
        }
    }
    ?>
</select></p>
 <p>
            <label for="activeurl">URL:
            </label>
        <select id="activeurl" name="activeurl" onChange="lshowcaseshortcodegenerate()">
          <option value="inactive">Inactive</option>
          <option value="new">Open in new window</option>
          <option value="new_nofollow">Open in new window (nofollow)</option>
          <option value="same">Open in same window</option>
        </select></p>
         
  
  
   <p>
     <label for="style">Style:</label>
        
        <select id="style" name="style" onChange="lshowcaseshortcodegenerate()">
          <?php 
    $stylesarray = lshowcase_styles_array();
    foreach ($stylesarray as $option => $key) {
        ?>
          
          <option value="<?php 
        echo $option;
        ?>
"><?php 
        echo $key['description'];
        ?>
</option>
          <?php 
    }
    ?>
		</select></p>

		<p>
		     <label for="tooltip">Show Tooltip:</label>
		       
		        <select id="tooltip" name="tooltip" onChange="lshowcaseshortcodegenerate()">
		          
		          <option value="false">No</option> 
		          <option value="true">Yes - Show Title</option> 
		          <option value="true-description">Yes - Show Description</option> 
		          
		</select>

		</p>

		

       
        <p>Layout:
          
          <select id="interface" name="interface" onChange="lshowcaseshortcodegenerate()">
          <option value="hcarousel" selected>Horizontal Carousel</option>
          <option value="grid"  >Normal Grid</option>
          <option value="grid12" >Responsive Grid - 12 Columns</option> 
          <option value="grid11" >Responsive Grid - 11 Columns</option>
          <option value="grid10" >Responsive Grid - 10 Columns</option>
          <option value="grid9" >Responsive Grid - 9 Columns</option>
          <option value="grid8" >Responsive Grid - 8 Columns</option>
          <option value="grid7" >Responsive Grid - 7 Columns</option> 
          <option value="grid6" >Responsive Grid - 6 Columns</option> 
          <option value="grid5" >Responsive Grid - 5 Columns</option>  
          <option value="grid4" >Responsive Grid - 4 Columns</option>
          <option value="grid3" >Responsive Grid - 3 Columns</option>
          <option value="grid2" >Responsive Grid - 2 Columns</option>
          <option value="grid1" >Responsive Grid - 1 Columns</option>     
          
</select></p>



<div id="ls_carousel_type">
	<p id="ls_carousel_settings_option" style="display:none;">
		<label for="">Carousel Settings: </label>
		<input name="use_defaults" id="use_defaults" type="radio" value="1" checked="checked" onclick="hidecustomsettings();" />
              Default
                <input name="use_defaults" id="use_defaults" type="radio" value="0" onclick="showcustomsettings();" />
              Custom
	</p>
	<div id="ls_carousel_settings" style="display:none; background:#FFF; padding:5px;"> 
		
<table width="100%">
  <tr>
    <td nowrap >Auto Scroll</td>
    <td><select name="lshowcase_carousel_autoscroll" onChange="lshowcaseshortcodegenerate()">
      <option value="true"  <?php 
    selected($options['lshowcase_carousel_autoscroll'], 'true');
    ?>
>Yes - With Pause</option>
      <option value="ticker"  <?php 
    selected($options['lshowcase_carousel_autoscroll'], 'ticker');
    ?>
>Yes - Non Stop</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_autoscroll'], 'false');
    ?>
>No</option>
    </select></td>
  
  
  </table>
  <table width="100%" id="lst_pause_time">
  
  <tr>
    <td nowrap >Pause Time</td>
    <td><input type="text" name="lshowcase_carousel_pause" value="<?php 
    echo $options['lshowcase_carousel_pause'];
    ?>
" onChange="lshowcaseshortcodegenerate()" size="10" /></td>
  </tr><tr><td colspan="2"><span class="howto">The amount of time (in ms) between each auto transition</span></td>
  </tr>
  </table>
  <table width="100%" id="lst_pause_hover">
  <tr>
    <td nowrap >Pause on Hover</td>
    <td><select name="lshowcase_carousel_autohover" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_autohover'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_autohover'], 'false');
    ?>
>No</option>
    </select></td>
  </tr><tr><td colspan="2"><span class="howto">Auto scroll will pause when mouse hovers over slider</span></td>
  </tr>
  
  </table>
  <table width="100%" id="lst_auto_controls">
  
  <tr>
    <td nowrap >Auto Controls</td>
    <td><select name="lshowcase_carousel_autocontrols" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_autocontrols'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_autocontrols'], 'false');
    ?>
>No</option>
    </select></td>
  </tr><tr><td colspan="2"><span class="howto">If active, "Start" / "Stop" controls will be added</span></td>
  </tr>
  
  </table>
  <table width="100%">
  
  <tr>
    <td nowrap >Transition Speed:</td>
    <td><input type="text" name="lshowcase_carousel_speed" value="<?php 
    echo $options['lshowcase_carousel_speed'];
    ?>
" onChange="lshowcaseshortcodegenerate()" size="10" /></td>
  </tr><tr><td colspan="2"><span class="howto">Slide transition duration (in ms - intenger) </span></td>
  </tr>
  <tr>
    <td nowrap >Image Margin:</td>
    <td><input type="text" size="10" name="lshowcase_carousel_slideMargin" value="<?php 
    echo $options['lshowcase_carousel_slideMargin'];
    ?>
" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">Margin between each image (intenger)</span></td>
  </tr>
  </table>
  <table width="100%" id="lst_carousel_common_settings">
  <tr>
    <td nowrap >Infinite Loop:</td>
    <td><select name="lshowcase_carousel_infiniteLoop" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_infiniteLoop'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_infiniteLoop'], 'false');
    ?>
>No</option>
    </select></td>

  <tr>
    <td nowrap >Show Pager:</td>
    <td><select name="lshowcase_carousel_pager" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_pager'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_pager'], 'false');
    ?>
>No</option>
    </select></td>
  </tr><tr><td colspan="2"><span class="howto">If Active, a pager will be added.</span></td>
  </tr>
  <tr>
    <td nowrap >Show Controls:</td>
    <td><select name="lshowcase_carousel_controls" onChange="lshowcaseshortcodegenerate()">
      <option value="true" <?php 
    selected($options['lshowcase_carousel_controls'], 'true');
    ?>
>Yes</option>
      <option value="false" <?php 
    selected($options['lshowcase_carousel_controls'], 'false');
    ?>
>No</option>
    </select></td>
  </tr><tr><td colspan="2"><span class="howto">If Active, "Next" / "Prev" image controls will be added.</span></td>
  </tr>
  <tr>
    <td nowrap >Minimum Slides:</td>
    <td><input size="10" type="text" name="lshowcase_carousel_minSlides" value="<?php 
    echo $options['lshowcase_carousel_minSlides'];
    ?>
" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">The minimum number of slides to be shown.</span></td>
  </tr>
  <tr>
    <td nowrap >Maximum Slides:</td>
    <td><input size="10" type="text" name="lshowcase_carousel_maxSlides" value="<?php 
    echo $options['lshowcase_carousel_maxSlides'];
    ?>
" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">The maximum number of slides to be shown.</span></td>
  </tr>
  <tr>
    <td nowrap >Slides to move:</td>
    <td><input size="10" type="text" name="lshowcase_carousel_moveSlides" value="<?php 
    echo $options['lshowcase_carousel_moveSlides'];
    ?>
" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">The number of slides to move on transition.  If zero, the number of fully-visible slides will be used.</span></td>
</tr>
</table>
<table width="100%" style="border-top:1px dashed #CCC; margin-top:20px; padding:10px;">
<tr>
    <td nowrap >Image Size Override:</td>
    <td><input size="10" type="text" name="lshowcase_image_size_overide" value="" size="10" onChange="lshowcaseshortcodegenerate()" /></td>
  </tr><tr><td colspan="2"><span class="howto">Leave blank to use default values.
In case you want to override the default image size settings, use this field to put the width and height values in the following format: width,height
ex. 100,100.
Smallest value will prevail if images don't have exactly this size.</span></td>
</tr>




</table>


	</div>

</div>

</form>
    </div>
    </td><td valign="top"><h3>Shortcode</h3> 
    Use this shortcode to display the list of logos in your posts or pages! Just copy this piece of text and place it where you want it to display.
    
      <div id="shortcode" style="padding:10px; background-color:#fff;border-left:4px solid #7ad03a;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 1px 0 rgba(0,0,0,.1)"></div>
    
    <h3>PHP Function</h3>
    Use this PHP function to display the list of logos directly in your theme files!
    <div id="phpcode" style="padding:10px; background-color:#fff;border-left:4px solid #7ad03a;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 1px 0 rgba(0,0,0,.1)"> </div>
    
    <h3> Preview</h3>
      
	<div id="preview"></div>
    <div id="hcarouselhelp" style="margin-top:50px; display:none;">You can also change the way the Carousel/Slider works in the <a href="edit.php?post_type=lshowcase&page=lshowcase_settings">Settings Page</a></div>
    
      </td></tr></table>
    
    
<?php 
    $options = get_option('lshowcase-settings');
    $mode = "'horizontal'";
    $slidewidth = $options['lshowcase_thumb_width'];
    $autoscroll = $options['lshowcase_carousel_autoscroll'];
    $pausetime = $options['lshowcase_carousel_pause'];
    $autohover = $options['lshowcase_carousel_autohover'];
    $pager = $options['lshowcase_carousel_pager'];
    $tickerhover = $autohover;
    $ticker = 'false';
    $usecss = 'true';
    $auto = 'true';
    if ($autoscroll == 'false') {
        $auto = 'false';
    }
    if ($autoscroll == 'ticker') {
        $ticker = 'true';
        $tickerhover = $autohover;
        $autoscroll = 'true';
        $pager = 'false';
        $auto = 'false';
        if ($tickerhover == 'true') {
            $usecss = 'false';
        }
    }
    $autocontrols = $options['lshowcase_carousel_autocontrols'];
    $speed = $options['lshowcase_carousel_speed'];
    $slidemargin = $options['lshowcase_carousel_slideMargin'];
    $loop = $options['lshowcase_carousel_infiniteLoop'];
    $controls = $options['lshowcase_carousel_controls'];
    $minslides = $options['lshowcase_carousel_minSlides'];
    $maxslides = $options['lshowcase_carousel_maxSlides'];
    $moveslides = $options['lshowcase_carousel_moveSlides'];
    ?>
<script type="text/javascript">

	
	
	function checkslider()
	{
	
		 
		 var layout = document.getElementById( 'interface' ).value;

		 

		if(document.getElementsByName('use_defaults')[1].checked) { 

			
			var slidewidth = <?php 
    echo $slidewidth;
    ?>
;

			var imgwo = document.getElementsByName('lshowcase_image_size_overide')[0].value;
			if (imgwo!="") {

				 var imgwarray = imgwo.split(",");
				 slidewidth = parseInt(imgwarray[0]);
			};

			var autoscroll = document.getElementsByName('lshowcase_carousel_autoscroll')[0].value;
			var pause = parseInt(document.getElementsByName('lshowcase_carousel_pause')[0].value);
			
			var autohover = (document.getElementsByName('lshowcase_carousel_autohover')[0].value === 'true');
			var pager = (document.getElementsByName('lshowcase_carousel_pager')[0].value === 'true');

			

			var tickerhover = autohover;
			var ticker = false;			
			var usecss = true;
			var auto = true;


			if (autoscroll == 'false') {
				auto = false;
			}

			if (autoscroll=='ticker') {
				ticker = true;
				tickerhover = autohover;
				pager = false;
				auto = false;
				
				if (tickerhover==true) {
					usecss = false;
				} 
			}


			var autocontrols = (document.getElementsByName('lshowcase_carousel_autocontrols')[0].value === 'true');
			var speed = parseInt(document.getElementsByName('lshowcase_carousel_speed')[0].value);
			var slidemargin = parseInt(document.getElementsByName('lshowcase_carousel_slideMargin')[0].value);
			var infiniteloop = (document.getElementsByName('lshowcase_carousel_infiniteLoop')[0].value === 'true');
			
			var controls = (document.getElementsByName('lshowcase_carousel_controls')[0].value === 'true');
			var minslides = parseInt(document.getElementsByName('lshowcase_carousel_minSlides')[0].value);
			var maxslides = parseInt(document.getElementsByName('lshowcase_carousel_maxSlides')[0].value);
			var moveslides = parseInt(document.getElementsByName('lshowcase_carousel_moveSlides')[0].value);

		}


		else {

			 var mode = <?php 
    echo $mode;
    ?>
;
			 var slidewidth = <?php 
    echo $slidewidth;
    ?>
;
			 var auto = <?php 
    echo $auto;
    ?>
;
			 var pause = <?php 
    echo $pausetime;
    ?>
;
			 var autohover = <?php 
    echo $autohover;
    ?>
;
			 var ticker = <?php 
    echo $ticker;
    ?>
;
			 var tickerhover = <?php 
    echo $tickerhover;
    ?>
;
			 var usecss = <?php 
    echo $usecss;
    ?>
;
			 var autocontrols = <?php 
    echo $autocontrols;
    ?>
;
			 var speed = <?php 
    echo $speed;
    ?>
;
			 var slidemargin = <?php 
    echo $slidemargin;
    ?>
;
			 var infiniteloop = <?php 
    echo $loop;
    ?>
 ;
			 var pager = <?php 
    echo $pager;
    ?>
;
			 var controls = <?php 
    echo $controls;
    ?>
;		 
			 var minslides = <?php 
    echo $minslides;
    ?>
;
			 var maxslides = <?php 
    echo $maxslides;
    ?>
;
			 var moveslides = <?php 
    echo $moveslides;
    ?>
;
		}
	
	if(layout=="hcarousel" ) {

		 var sliderDiv = jQuery( '.lshowcase-wrap-carousel-0' );

		sliderDiv.fadeIn('slow');
			
		sliderDiv.bxSlider({
		
			auto: auto,		
			pause: pause,
			autoHover: autohover,
			ticker: ticker,
			tickerHover: tickerhover,
			useCSS: usecss,
			autoControls: autocontrols,
			mode: mode,
			speed: speed,
			slideMargin: slidemargin,
			infiniteLoop: infiniteloop,
		    pager: pager, 
			controls: controls,
		    slideWidth: slidewidth+20,
		    minSlides: minslides,
		    maxSlides: maxslides,
		    moveSlides: moveslides,
		    autoDirection: 'next'	//change to 'prev' if you want to reverse order

			});
		}

		
	}
	
	
	function checktooltip() {
		
	var tooltip = document.getElementById( 'tooltip' ).value;
	
	if(tooltip=="true" || tooltip=="true-description") {
		
			jQuery( '.lshowcase-tooltip' ).tooltip({
			content: function () { return jQuery(this).attr('title') },
			position: {
			my: "center bottom-20",
			at: "center top",
			using: function( position, feedback ) {
			jQuery( this ).css( position );
			jQuery( "<div>" )
			.addClass( "lsarrow" )
			.addClass( feedback.vertical )
			.addClass( feedback.horizontal )
			.appendTo( this );
			}
			}
			});
		}

	}

	function checkgrayscale() {
		
		
		jQuery(".lshowcase-jquery-gray").fadeIn(500);
		
		// clone image
		jQuery('.lshowcase-jquery-gray').each(function(){
			var el = jQuery(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('ls_img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
				var el = jQuery(this);
				el.parent().css({"width":this.width,"height":this.height});
				el.dequeue();
			});
			this.src = ls_grayscale(this.src);
		});
		
		// Fade image 
		jQuery('.lshowcase-jquery-gray').mouseover(function(){
			jQuery(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
		})
		jQuery('.ls_img_grayscale').mouseout(function(){
			jQuery(this).stop().animate({opacity:0}, 1000);
		});		
	
	}
	
	
	
	 </script>
     <?php 
}