website construction

Wordpress product picture magnifying glass effect production

<script src=”https://cdn.bootcss.com/jquery/1. […]

19 July, 20222267 Reading41 minutes of reading
article directories

<script src=”https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js”></script>
<script src=”<? php bloginfo(‘template_directory’); ?>/ images/jquery.imagezoom.min.js”></script>

.box{width:380px;}
.box img{vertical-align:top;border:0;}
.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img{vertical-align:middle;}
.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb{margin:10px 0 0;overflow:hidden;}
.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a{height:310px;width:380px;}
.tb-s310{max-height:310px;max-width:380px;}
.tb-s310 img{max-height:306px;max-width:376px;}
.tb-s310 a{*font-size:271px;}
.tb-s40 a{*font-size:35px;}
.tb-s40 img{width:40px;height:40px;}
.tb-s40, .tb-s40 a{height:40px;width:40px;}
.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:44px;padding:2px;}
.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
.tb-thumb li div{border:1px solid #CDCDCD;}
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url(“images/mask.png”) repeat scroll 0 0 transparent;cursor:move;z-index:1;}

<script>
jQuery(document).ready(function($){
$(“.jqzoom”).imagezoom();
$(“#thumblist li a”).click(function(){
$(this).parents(“li”).addClass(“tb-selected”).siblings().removeClass(“tb-selected”);
$(“.jqzoom”).attr(‘src’,$(this).find(“img”).attr(“mid”));
$(“.jqzoom”).attr(‘rel’,$(this).find(“img”).attr(“big”));
});
});
</script>
metabox.php
<? php
//Instantiation of custom panel classes
/** ********title*************/
$options = array();
$boxinfo = array ('title '=>' parameter fills','id'=>'ashubox',' page '=>array ('post'),'context'=>'normal',' priority '=>' low','callback'=>");$options[] = array(" name "=>" product thumbnail upload ",
“type” => “title”);$options[] = array(
"name"=>"thumbnail 1",
“desc” => “”,
“id” => “ashu_upimg01”,
“std” => “”,
"button_label"=>'Upload picture',
“type” => “media”
);

$options[] = array(
"name"=>"thumbnail 2",
“desc” => “”,
“id” => “ashu_upimg02”,
“std” => “”,
"button_label"=>'Upload picture',
“type” => “media”
);
$options[] = array(
"name"=>"thumbnail 3",
“desc” => “”,
“id” => “ashu_upimg03”,
“std” => “”,
"button_label"=>'Upload picture',
“type” => “media”
);
$options[] = array(
"name"=>"thumbnail 4",
“desc” => “”,
“id” => “ashu_upimg04”,
“std” => “”,
"button_label"=>'Upload picture',
“type” => “media”
);
$options[] = array(
"name"=>"thumbnail 5",
“desc” => “”,
“id” => “ashu_upimg05”,
“std” => “”,
"button_label"=>'Upload picture',
“type” => “media”
);

$new_box = new ashu_meta_box($options, $boxinfo);
?>

<div class=”box”>

<div class=”tb-booth tb-pic tb-s310″>
<? php if ( get_post_meta($post->ID, ‘ashu_upimg01’, true) ) {?>
<a href=”<? php echo get_post_meta($post->ID,”ashu_upimg01″,true);?>”><img src=”<? php echo get_post_meta($post->ID,”ashu_upimg01″,true);?>”rel=”<? php echo get_post_meta($post->ID,”ashu_upimg01″,true);?>”class=”jqzoom” /></a>
<? php }?>
</div>

<ul class=”tb-thumb” id=”thumblist”>
<? php if ( get_post_meta($post->ID, ‘ashu_upimg01’, true) ) {?>
<li class=”tb-selected”><div class=”tb-pic tb-s40″><a href=”javascript:void(0);”><img src=”<? php echo get_post_meta($post->ID,”ashu_upimg01″,true);?>”mid=”<? php echo get_post_meta($post->ID,”ashu_upimg01″,true);?>”big=”<? php echo get_post_meta($post->ID,”ashu_upimg01″,true);?>”></a></div></li>
<? php }else{?><li class=”tb-selected”><div class=”tb-pic tb-s40″></div></li> <? php }?>

<? php if ( get_post_meta($post->ID, ‘ashu_upimg02’, true) ) {?>
<li><div class=”tb-pic tb-s40″><a href=”javascript:void(0);”><img src=”<? php echo get_post_meta($post->ID,”ashu_upimg02″,true);?>”mid=”<? php echo get_post_meta($post->ID,”ashu_upimg02″,true);?>”big=”<? php echo get_post_meta($post->ID,”ashu_upimg02″,true);?>”></a></div></li>
<? php }else{?><li><div class=”tb-pic tb-s40″></div></li> <? php }?>

<? php if ( get_post_meta($post->ID, ‘ashu_upimg03’, true) ) {?>
<li><div class=”tb-pic tb-s40″><a href=”javascript:void(0);”><img src=”<? php echo get_post_meta($post->ID,”ashu_upimg03″,true);?>”mid=”<? php echo get_post_meta($post->ID,”ashu_upimg03″,true);?>”big=”<? php echo get_post_meta($post->ID,”ashu_upimg03″,true);?>”></a></div></li>
<? php }else{?><li><div class=”tb-pic tb-s40″></div></li> <? php }?>

<? php if ( get_post_meta($post->ID, ‘ashu_upimg04’, true) ) {?>
<li><div class=”tb-pic tb-s40″><a href=”javascript:void(0);”><img src=”<? php echo get_post_meta($post->ID,”ashu_upimg04″,true);?>”mid=”<? php echo get_post_meta($post->ID,”ashu_upimg04″,true);?>”big=”<? php echo get_post_meta($post->ID,”ashu_upimg04″,true);?>”></a></div></li>
<? php }?>

<? php if ( get_post_meta($post->ID, ‘ashu_upimg05’, true) ) {?>
<li><div class=”tb-pic tb-s40″><a href=”javascript:void(0);”><img src=”<? php echo get_post_meta($post->ID,”ashu_upimg05″,true);?>”mid=”<? php echo get_post_meta($post->ID,”ashu_upimg05″,true);?>”big=”<? php echo get_post_meta($post->ID,”ashu_upimg05″,true);?>”></a></div></li>
<? php }?>

</ul>

</div>

 

 

metaboxclass.php：

  1. <? php
  2. /*
  3. Wordpress article custom field class file
  4. Version: 1.0
  5. Author: Trees are my friends
  6. Author URI: http://www.ashuwp.com
  7. License: http://www.ashuwp.com/courses/highgrade/298.html
  8. */
  9. class ashu_meta_box{
  10.     var $options;
  11.     var $boxinfo;
  13.     //constructor
  14.     function ashu_meta_box($options,$boxinfo){
  15.         $this->options = $options;
  16.         $this->boxinfo = $boxinfo;
  18. add_action(‘admin_menu’, array(&$this, ‘init_boxes’));
  19. add_action(‘save_post’, array(&$this, ‘save_postdata’));
  20.     }
  22.     //initialize
  23.     function init_boxes(){
  24.         $this->add_script_and_styles();
  25.         $this->create_meta_box();
  26.     }
  28.     //Load css and js scripts
  29.     function add_script_and_styles(){
  30.         if(basename( $_SERVER[‘PHP_SELF’]) == “page.php”
  31. || basename( $_SERVER[‘PHP_SELF’]) == “page-new.php”
  32. || basename( $_SERVER[‘PHP_SELF’]) == “post-new.php”
  33. || basename( $_SERVER[‘PHP_SELF’]) == “post.php”
  34. || basename( $_SERVER[‘PHP_SELF’]) == “media-upload.php”)
  35.         {
  36.             //Pay attention to the url of the loaded script
  37. wp_enqueue_style(‘metabox_fields_css’, TEMJS_URI.‘metabox_fields.css’);
  38. wp_enqueue_script(‘metabox_fields_js’,TEMJS_URI.‘metabox_fields.js’);
  39. wp_enqueue_style(‘thickbox’);
  40. wp_enqueue_script(‘media-upload’);
  41. wp_enqueue_script(‘thickbox’);
  44.             if(isset($_GET[‘hijack_target’]))
  45.             {
  46. add_action(‘admin_head’, array(&$this,’add_hijack_var’));
  47.             }
  48.         }
  49.     }
  51.     /*************************/
  52.     function add_hijack_var()
  53.     {
  54.         echo “<meta name=’hijack_target’ content='”.$_GET[‘hijack_target’].“‘ />\n”;
  55.     }
  57.     //Create a custom panel
  58.     function create_meta_box(){
  59.         if ( function_exists(‘add_meta_box’) && is_array($this->boxinfo[‘page’]) )
  60.         {
  61.             foreach ($this->boxinfo[‘page’] as $area)
  62.             {
  63.                 if ($this->boxinfo[‘callback’] == ”) $this->boxinfo[‘callback’] = ‘new_meta_boxes’;
  65. add_meta_box(
  66.                     $this->boxinfo[‘id’],
  67.                     $this->boxinfo[‘title’],
  68.                     array(&$this, $this->boxinfo[‘callback’]),
  69.                     $area, $this->boxinfo[‘context’],
  70.                     $this->boxinfo[‘priority’]
  71.                 );
  72.             }
  73.         }
  74.     }
  76.     //Create a display function for a custom panel
  77.     function new_meta_boxes(){
  78.         global $post;
  79.         //Call display function based on type
  80.         foreach ($this->options as $option)
  81.         {
  82.             if (method_exists($this, $option[‘type’]))
  83.             {
  84.                 $meta_box_value = get_post_meta($post->ID, $option[‘id’], true);
  85.                 if($meta_box_value != “”) $option[‘std’] = $meta_box_value;
  87.                 echo ‘<div class=“alt kriesi_meta_box_alt meta_box_’.$ option[‘type’].’meta_box_’.$ this->boxinfo[‘context’]. '”>’;
  88.                 $this->$option[‘type’]($option);
  89.                 echo ‘</div>’;
  90.             }
  91.         }
  93.         //Hidden domain
  94.         echo‘<input type=“hidden” name=“‘.$ this->boxinfo[‘id’].’_ noncename” id=“‘.$ this->boxinfo[‘id’].’_ noncename” value=“‘.wp_create_nonce( ‘ashumetabox’ ). '” />’;
  95.     }
  97.     //Save field data
  98.     function save_postdata() {
  99.         if( isset( $_POST[‘post_type’] ) && in_array($_POST[‘post_type’],$this->boxinfo[‘page’] ) && (isset($_POST[‘save’]) || isset($_POST[‘publish’]) ) ){
  100.         $post_id = $_POST[‘post_ID’];
  102.         foreach ($this->options as $option) {
  103.             if (! wp_verify_nonce($_POST[$this->boxinfo[‘id’].’_ noncename’], ‘ashumetabox’)) {
  104.                 return $post_id ;
  105.             }
  106.             //Determine authority
  107.             if ( ‘page’ == $_POST[‘post_type’] ) {
  108.                 if ( ! current_user_can( ‘edit_page’, $post_id  ))
  109.                 return $post_id ;
  110.             } else {
  111.                 if ( ! current_user_can( ‘edit_post’, $post_id  ))
  112.                 return $post_id ;
  113.             }
  114.             //Convert predefined characters to html entities
  115.             if( $option[‘type’] == ‘tinymce’ ){
  116.                     $data = stripslashes($_POST[$option[‘id’]]);
  117.             }elseif( $option[‘type’] == ‘checkbox’ ){
  118.                     $data = $_POST[$option[‘id’]];
  119.             }else{
  120.                 $data = htmlspecialchars($_POST[$option[‘id’]], ENT_QUOTES,“UTF-8”);
  121.             }
  123.             if(get_post_meta($post_id , $option[‘id’]) == “”)
  124. add_post_meta($post_id , $option[‘id’], $data, true);
  126.             elseif($data != get_post_meta($post_id , $option[‘id’], true))
  127. update_post_meta($post_id , $option[‘id’], $data);
  129.             elseif($data == “”)
  130. delete_post_meta($post_id , $option[‘id’], get_post_meta($post_id , $option[‘id’], true));
  132.         }
  133.         }
  134.     }
  135.     //Display title
  136.     function title($values){
  137.         echo ‘<p>’.$values[‘name’]. '</p>’;
  138.     }
  139.     //Text box
  140.     function text($values){
  141.         if(isset($this->database_options[$values[‘id’]])) $values[‘std’] = $this->database_options[$values[‘id’]];
  143.         echo ‘<p>’.$values[‘name’]. '</p>’;
  144.         echo ‘<p><input type=“text” size=“‘.$ values[‘size’]. '” value=“‘.$ values[‘std’]. '” id=“‘.$ values[‘id’]. '” name=“‘.$ values[‘id’]. '”/>’;
  145.         echo $values[‘desc’]. '<br/></p>’;
  146.         echo ‘<br/>’;
  147.     }
  148.     //Text field
  149.     function textarea($values){
  150.         if(isset($this->database_options[$values[‘id’]])) $values[‘std’] = $this->database_options[$values[‘id’]];
  152.         echo ‘<p>’.$values[‘name’]. '</p>’;
  153.         echo ‘<p><textarea class=“kriesi_textarea” cols=“60” rows=“5” id=“‘.$ values[‘id’]. '” name=“‘.$ values[‘id’]. '”>’.$values[‘std’]. '</textarea>’;
  154.         echo $values[‘desc’]. '<br/></p>’;
  155.         echo ‘<br/>’;
  156.     }
  157.     //Media upload
  158.     function media($values){
  159.         if(isset($this->database_options[$values[‘id’]])) $values[‘std’] = $this->database_options[$values[‘id’]];
  161.         //Picture upload button
  162.         global $post_ID, $temp_ID;
  163.         $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);
  164.         $media_upload_iframe_src = “media-upload.php? post_id=$uploading_iframe_ID”;
  165.         $image_upload_iframe_src = apply_filters(‘image_upload_iframe_src’, “$media_upload_iframe_src&amp;type=image”);
  167.         $button = ‘<a href=“‘.$ image_upload_iframe_src.’& amp;hijack_target=’.$ values[‘id’].’& amp;TB_iframe=true” id=“‘.$ values[‘id’]. '” class=“k_hijack button thickbox” onclick=“return false;” &gt; Upload</a> ';
  169.         //Determine the image format and preview the image
  170.         $image = ”;
  171.         if($values[‘std’] != ”) {
  172.             $fileextension = substr($values[‘std’], strrpos($values[‘std’], ‘.’) + 1);
  173.             $extensions = array(‘png’,’gif’,’jpeg’,’jpg’,’pdf’,’tif’);
  175.             if(in_array($fileextension, $extensions))
  176.             {
  177.                 $image = ‘<img src=“‘.$ values[‘std’]. '” />’;
  178.             }
  179.         }
  181.         echo ‘<div id=“‘.$ values[‘id’].’_ div” class=“kriesi_preview_pic”>’.$image . '</div>’;
  182.         echo ‘<p>’.$values[‘name’]. '</p><p>’;
  183.         if($values[‘desc’] != “”) echo ‘<p>’.$values[‘desc’]. '<br/>’;
  184.         echo ‘<input class=“kriesi_preview_pic_input” type=“text” size=“‘.$ values[‘size’]. '” value=“‘.$ values[‘std’]. '” name=“‘.$ values[‘id’]. '”/>’.$button;
  185.         echo ‘</p>’;
  186.         echo ‘<br/>’;
  187.     }
  188.     //radio box
  189.     function radio( $values ){
  190.         if(isset($this->database_options[$values[‘id’]]))
  191.             $values[‘std’] = $this->database_options[$values[‘id’]];
  192.         echo ‘<p>’.$values[‘name’]. '</p>’;
  193.         foreach( $values[‘buttons’] as $key=>$value ) {
  194.             $checked =“”;
  195.             if($values[‘std’] == $key) {
  196.                 $checked = ‘checked = “checked”‘;
  197.             }
  198.             echo ‘<input ‘.$checked.’type=“radio” class=“kcheck” value=“‘.$ key. '” name=“‘.$ values[‘id’]. '”/>’.$value;
  199.         }
  200.     }
  201.     //Checkbox
  202.     function checkbox($values){
  203.         echo ‘<p>’.$values[‘name’]. '</p>’;
  204.         foreach( $values[‘buttons’] as $key=>$value ) {
  205.             $checked =“”;
  206.             if( is_array($values[‘std’]) && in_array($key,$values[‘std’])) {
  207.                 $checked = ‘checked = “checked”‘;
  208.             }
  209.             echo ‘<input ‘.$checked.’type=“checkbox” class=“kcheck” value=“‘.$ key. '” name=“‘.$ values[‘id’]. '[]”/>’.$value;
  210.         }
  211.         echo ‘<label for=“‘.$ values[‘id’]. '”>’.$values[‘desc’]. '</label><br/></p>’;
  212.     }
  213.     //drop-down box
  214.     function dropdown($values){
  215.         echo ‘<p>’.$values[‘name’]. '</p>’;
  216.             //Select content to enable pages, categories, menus, sidebars and custom content
  217.             if($values[‘subtype’] == ‘page’){
  218.                 $select = ‘Select page’;
  219.                 $entries = get_pages(‘title_li=&orderby=name’);
  220.             }else if($values[‘subtype’] == ‘cat’){
  221.                 $select = ‘Select category’;
  222.                 $entries = get_categories(‘title_li=&orderby=name&hide_empty=0’);
  223.             }else if($values[‘subtype’] == ‘menu’){
  224.                 $select = ‘Select Menu in page left’;
  225.                 $entries = get_terms( ‘nav_menu’, array( ‘hide_empty’ => false ) );
  226.             }else if($values[‘subtype’] == ‘sidebar’){
  227.                 global $wp_registered_sidebars;
  228.                 $select = ‘Select a special sidebar’;
  229.                 $entries = $wp_registered_sidebars;
  230.             }else{
  231.                 $select = ‘Select…’;
  232.                 $entries = $values[‘subtype’];
  233.             }
  235.             echo ‘<p><select class=“postform” id=“‘. $values[‘id’] . '” name=“‘. $values[‘id’] . '”> ‘;
  236.             echo ‘<option value=“”>’.$select . '</option> ‘;
  238.             foreach ($entries as $key => $entry){
  239.                 if($values[‘subtype’] == ‘page’){
  240.                     $id = $entry->ID;
  241.                     $title = $entry->post_title;
  242.                 }else if($values[‘subtype’] == ‘cat’){
  243.                     $id = $entry->term_id;
  244.                     $title = $entry->name;
  245.                 }else if($values[‘subtype’] == ‘menu’){
  246.                     $id = $entry->term_id;
  247.                     $title = $entry->name;
  248.                 }else if($values[‘subtype’] == ‘sidebar’){
  249.                     $id = $entry[‘id’];
  250.                     $title = $entry[‘name’];
  251.                 }else{
  252.                     $id = $entry;
  253.                     $title = $key;
  254.                 }
  256.                 if ($values[‘std’] == $id ){
  257.                     $selected = “selected=’selected'”;
  258.                 }else{
  259.                     $selected = “”;
  260.                 }
  262.                 echo“<option $selected value='”. $id.“‘>”. $title.“</option>”;
  263.             }
  265.         echo ‘</select>’;
  266.         echo $values[‘desc’]. '<br/></p>’;
  267.         echo ‘<br/>’;
  268.     }
  270.     //Editor
  271.     function tinymce($values){
  272.         if(isset($this->database_options[$values[‘id’]]))
  273.             $values[‘std’] = $this->database_options[$values[‘id’]];
  275.         echo ‘<p>’.$values[‘name’]. '</p>’;
  276. wp_editor( $values[‘std’], $values[‘id’] );
  277.         //wp_editor( $values[‘std’], ‘content’, array(‘dfw’ => true, ‘tabfocus_elements’ => ‘sample-permalink,post-preview’, ‘editor_height’ => 360) );
  278.         //with configuration parameters
  279.         /*wp_editor($meta_box[‘std’],$meta_box[‘name’].’_ value',$settings = array(quicktags=&gt;0,//Cancel html mode
  280. tinymce=&gt;1,//Visualization mode
  281. media_buttons=&gt;0,//Cancel media upload
  282. textarea_rows=&gt;5,//set the number of rows to 5
  283. editor_class=>”textareastyle”) ); */
  284.     }
  286. }
  287. ?>