ウェブサイトの建設

Word Press製品の画像拡大鏡効果

管理者による2022年7 月19日227 1読書読書41分

記事の目次

.box{width 380px;}
.box img{vert-top; der 0;}
.tb-pic a{table-; text-center; vert-middle;}
. tb-pic a img{vertical-align middle;}
.tb-pic a{*;*-f;*-height 1;}
.tb-thumb{in 10px0 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-s310a {height 310px;width 380px;}
. tb-s310 {max-height 310px;max-width 380px;}
.tb-s310 img{-height 306px;-width 376px;}
. tb-s310a {*font-size 271px;}
. tb-s40a {*font-size 35px;}
. tb-s40 img{width 40px;height 40px;}
.tb-s40. tb-s40a {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; der ium;}
. tb-thumb li div{border 1px solid #CDCD;}
div.zoomDiv{z-index 999; position absolute; top 0 px; left 0px; width 200px; height 200 px; background #ffff; border 1px solid #CCCCCC; display none; text-align center; overflow hidden;}
div.zoomMask{position absolute;background url“images/mask.png”repeat scroll0 transparent;cursor move;z-index 1;}

jQuery document.ready function ${

$“.jqzoom”.imagezoom;

$'#thumblist li a'. function {

$this.parents“li”.addClass“tb-selected”. blings. oveClass“tb-selected”;

$. jqzoom ".attr src $this." img ".attr" mid ";

$. jqzoom ".attr rel $this.find" img ".attr" big ";

});

</script>

metabox.php

<? PHPは
//カスタムパネルクラスのインスタンス化
/** *******title**********/
$=;
$boxinfo = array title =>パラメータ入力id => ashubox page =>array post context => normal priority => low callback =>";$options[] = array name"=>製品サムネールのアップロード
'type'=>'title';$options[] = array
“name” => “サムネイル1”
'desc'=>'
'id'=>'ashu_upimg01'
'std'=>'
button_label "=>画像のアップロード
“type” =“media”
);

$[] =
name "=>"サムネイル2 "
'desc'=>'
'id'=>'ashu_upimg02'
'std'=>'
button_label "=>画像のアップロード
“type” =“media”
);
$[] =
name "=>"サムネイル3 "
'desc'=>'
'id'=>'ashu_upimg03'
'std'=>'
button_label "=>画像のアップロード
“type” =“media”
);
$[] =
“name” => “サムネイル4”
'desc'=>'
'id'=>'ashu_upimg04'
'std'=>'
button_label "=>画像のアップロード
“type” =“media”
);
$[] =
name "=>"サムネイル5 "
'desc'=>'
id "=>" ashu_upimg05 "
'std'=>'
button_label "=>画像のアップロード
“type” =“media”
);

$new_box = new ashu_meta_box $$info;
?>

<div class=“tb-booth tb-pic tb-s 310”>
<? php if get_post_meta $post->ID ashu_upimg01true {>
<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;>クラス=“jqzoom” /></a>
<? PHP }>
</div>

<ul class='tb-thumb' id='thumblist'>
<? php if get_post_meta $post->ID ashu_upimg01true {>
<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-s 40"></div></li> <? PHP }>

<? php if get_post_meta $post->ID ashu_upimg02true {>
<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-s 40'></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-s 40'></div></li> <? PHP }>

<? php if get_post_meta $post->ID ashu_upimg04true {>
<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_upimg05true {>
<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：

<? PHPは
/*
Word Press記事カスタムフィールドクラスファイル
Version 1.0
著者は私の友人です。
Author URI http://www.ashuwp.com
ライセンスhttp://www.ashuwp.com/courses/highgrade/298.html
*/
クラス·オブ·クラス ashu_meta_box{
varさんの $options;
varさんの $boxinfo;
//コンストラクタ
関数の定義 ashu_meta_box$options,$boxinfo){
$thisの>options = $options;
$thisの->boxinfo = $boxinfo;
_action array(&$thisの、init_boxes;
add_action save_post array(&$thisの、_postdata;
}
【初期化】
関数の定義 _
$thisの->_script_and_styles;
$thisの->_meta_box;
}
CSSとjsスクリプトの読み込み
関数の定義 add_script_and_styles {
もしそうなら(basename( $_SERVER[PHP_SELF]== “page.php”
|| basename( $_SERVER[PHP_SELF]== “page-new.php”
|| basename( $_SERVER[PHP_SELF]== “post-new.php”
|| basename( $_SERVER[PHP_SELF]== “post.php”
|| basename( $_SERVER[PHP_SELF]== “media-upload.php”)
{
//読み込まれたスクリプトのURLに注意
wp_enue_style metabox_fields_css TEMJS_URI. metabox_fields.css
wp_enue_script metabox_fields_js TEMJS_URI. metab
wp_enqueue_style thickbox;
wp_enue_script ia-upload;
wp_enue_script thickbox;
もしそうならisset$_GETさん[hijack_target]
{
add_action admin_head array(&$thisの、add_hijack_var;
}
}
}
/*************************/
関数の定義 add_hijack_var
{
エコー ECHO <meta name = hijack_target content =''.$_GETさん[hijack_target]./>\n;
}
//カスタムパネルを作成
関数の定義 create_meta_box {
もしそうなら function_exists is_arrayです($thisの-> info [page]
{
Foreachの ($thisの->boxinfo [page] As As $area)
{
もしそうなら ($thisの-> info [callback]== ”) $thisの-> info [callback]= new_meta_es;
_meta_box
$thisの->boxinfo [id]
$thisの->boxinfo [title]、
array(&$thisの, $thisの->boxinfo [callback]
$area, $thisの->boxinfo [context]
$thisの->boxinfo [priority]
);
}
}
}
//カスタムパネルの表示機能の作成
関数の定義 new_meta_es {
グローバルグローバル·プログラム $Post;
//型に応じて表示関数を呼び出す
Foreachの ($thisの>>オプション As As $Optionの)
{
もしそうなら method_exists$thisの, $Optionの[type]
{
$meta_box_value = get_post_meta$Post->ID $Optionの[id] true;
もしそうなら($meta_box_value != “”) $Optionの[std] = $meta_box_value;
エコー ECHO <div クラス·オブ·クラス=alt kriesi_meta_box_alt meta_box_.$ [ meta_box_.$ this-> info [context]. '”>’;
$thisの->$Optionの[type]$Optionの);
エコー ECHO ‘</div>’;
}
}
//隠れた領域
エコー ECHO<input type=『 Hidden 』名前==“‘.$ this->boxinfo [id]._ noncename” id==“‘.$ this->boxinfo [id]._ noncename” value==の. wp_ '” />’;
}
//フィールドデータを保存
関数の定義 _postdata
もしそうならisset $_POST[post_e]&&& in_$_POST[post_e]$thisの-> info [page]&& isset$_POST[]|| isset$_POST[lish]{
$post_ID = $_POST[post_ID];
Foreachの ($thisの>>オプション As As $Optionの) {
もしそうなら (! wp_verify_ce$_POST[$thisの-> info [id]._ noncename]、ashumetabox {
Return To Returnシングル $post_ID ;
}
//判断の権限
もしそうなら ( ‘page’ == $_POST[post_type]{
もしそうなら ( ! current_user_can edit_page $post_ID ))
Return To Returnシングル $post_ID ;
} elseさん {
もしそうなら ( ! current_user_can edit_post $post_ID ))
Return To Returnシングル $post_ID ;
}
//定義済み文字をHTMLエンティティに変換する
もしそうなら( $Optionの[type]== tinymce {
$Data = ストリップスラッシュ($_POST[$Optionの[id];
}エルゼフ( $Optionの[type]== checkbox {
$Data = $_POST[$Optionの[ID];
}elseさん{
$Data = htspecialchars$_POST[$Optionの[id]、ENT_QUO、“UTF-8”);
}
もしそうなら(get_post_meta$post_ID , $Optionの[id]== “”)
_post_meta$post_ID , $Optionの[id]、 $Datatrue
エルゼフ($Data != get_post_meta$post_ID , $Optionの[id] true
update_post_meta$post_ID , $Optionの[id]、 $Data);
エルゼフ($Data == “”)
delete_post_meta$post_ID , $Optionの[id] get_post_meta$post_ID , $Optionの[id] true;
}
}
}
タイトルを表示する。
関数の定義 title：title$values){
エコー ECHO ‘<p>’.$values[name]。'</p>’;
}
//テキストボックス
関数の定義 text$values){
もしそうならisset$thisのdatabase_options [$values[id] $values[std] = $thisのdatabase_options [$values[ID];
エコー ECHO ‘<p>’.$values[name]。'</p>’;
エコー ECHO <<p>input type=『 text 』サイズ==“‘.$ values [size]. '” value==の“‘.$ values [std]. '” id==“‘.$ values [id]. '” 名前==“‘.$ values [id]. '”/>’;
エコー ECHO $values[desc]。'<br/></p>’;
エコー ECHO ‘<br/>’;
}
//テキストフィールド
関数の定義 textarea$values){
もしそうならisset$thisのdatabase_options [$values[id] $values[std] = $thisのdatabase_options [$values[ID];
エコー ECHO ‘<p>’.$values[name]。'</p>’;
エコー ECHO <<p>text クラス·オブ·クラス=“kriesi_textarea” cols==“60” rows==“5” id==“‘.$ values [id]. '” 名前==“‘.$ values [id]. '”>’.$values[std]。'</textarea>’;
エコー ECHO $values[desc]。'<br/></p>’;
エコー ECHO ‘<br/>’;
}
//メディアアップロード
関数の定義 media$values){
もしそうならisset$thisのdatabase_options [$values[id] $values[std] = $thisのdatabase_options [$values[ID];
画像アップロードボタン
グローバルグローバル·プログラム $post_ID, $_ID;
$uploading_iframe_ID = int 0 == $post_ID ? $_ID : $post_ID);
$media_u_iframe_src = media-upload.php post_id=$uplo_iframe_ID ";
$image_u_iframe_src = apply_filters image_upload_iframe_src $media_u_iframe_src type=image ");
$buttonの場合 =<a href=“‘.$ image_u_iframe_src.& amp;hijack_=.$ values [id].& amp;TB_iframe=true " id==“‘.$ values [id]. '” クラス·オブ·クラス=K_Hijack Button Thickboxの略。 onclick=“false”を返します。 >>>アップ</a>グレード
//ピクチャ形式の判定、ピクチャプレビュー [ピクチャけいしきの判定]
$image = ”;
もしそうなら($values[std] != ”) {
$fileextension = substr($values[std] strrpos($values[std] ‘.’) + 1);
$extensions = array(‘png’,’gif’,’jpeg’,’jpg’,’pdf’,’tif’);
もしそうなら(in_$fileextension, $extensions))
{
$image =<img src=“‘.$ values [std]. '” />’;
}
}
エコー ECHO <div id=“‘.$ values [id]._ DIV” クラス·オブ·クラス=“kriesi_preview_pic”>’.$image . '</div>’;
エコー ECHO ‘<p>’.$values[name]。'</p><p>’;
もしそうなら($values[desc] != “”) エコー ECHO ‘<p>’.$values[desc]。'<br/>’;
エコー ECHO <input クラス·オブ·クラス=“kriesi_preview_pic_input” type==の『 text 』サイズ==“‘.$ values [size]. '” value==の“‘.$ values [std]. '” 名前==“‘.$ values [id]. '”/>’.$buttonの場合;
エコー ECHO ‘</p>’;
エコー ECHO ‘<br/>’;
}
//ラジオボックス
関数の定義 radio $values ){
もしそうならisset$thisのdatabase_options [$values[id]
$values[std] = $thisのdatabase_options [$values[ID];
エコー ECHO ‘<p>’.$values[name]。'</p>’;
Foreachの( $values[buttons] As As $keyとは=>$value ) {
$checked =“”;
もしそうなら($values[std]== $keyとは) {
$checked = checked = “CHECK”‘;
}
エコー ECHO <input$checked.’type==の『 Radio 』クラス·オブ·クラス=『 KCHECK 』 value==の“‘.$キー。'” 名前==“‘.$ values [id]. '”/>’.$value;
}
}
//チェックボックス
関数の定義 box$values){
エコー ECHO ‘<p>’.$values[name]。'</p>’;
Foreachの( $values[buttons] As As $keyとは=>$value ) {
$checked =“”;
もしそうなら( is_arrayです($values[std]&&& in_$keyとは,$values[std]{
$checked = checked = “CHECK”‘;
}
エコー ECHO <input$checked.’type==の“Checkbox” クラス·オブ·クラス=『 KCHECK 』 value==の“‘.$キー。'” 名前==“‘.$ values [id]. '[]”/>’.$value;
}
エコー ECHO < for forは=“‘.$ values [id]. '”>’.$values[desc]。'</label><br/></p>’;
}
//ドロップダウンボックス
関数の定義 dropdown$values){
エコー ECHO ‘<p>’.$values[name]。'</p>’;
//コンテンツを選択すると、ページ、カテゴリ、メニュー、サイドバー、カスタムコンテンツが可能になります。
もしそうなら($values[subtype]== page {
$selection = Select page;
$entries = get_pages title_li=&orderby= name;
}elseさんもしそうなら($values[subtype]== cat {
$selection = Select category;
$entries = get_categories title_li=&orderby=name&hide_ty = 0;
}elseさんもしそうなら($values[subtype]== menu {
$selection = Select Menu in page left;
$entries = get_terms n_menu array( ‘hide_empty’ => false ) );
}elseさんもしそうなら($values[subtype]== sidebar {
グローバルグローバル·プログラム $wp_regist_ebars;
$selection = Select a special ebar;
$entries = $wp_regist_ebars;
}elseさん{
$selection = Select nParticle;
$entries = $values[subtype];
}
エコー ECHO <<p>select クラス·オブ·クラス=『 postform 』 id==“‘. $values [id] . '” 名前==“‘. $values [id] . '”> ‘;
エコー ECHO <option value=“”>’.$selection . '</option>‘;
Foreachの ($entries As As $keyとは => $entry){
もしそうなら($values[subtype]== page {
$IDの = $entry>>ID;
$title = $entry> Post_title;
}elseさんもしそうなら($values[subtype]== cat {
$IDの = $entry-> term_id;
$title = $entry>>名前;
}elseさんもしそうなら($values[subtype]== menu {
$IDの = $entry-> term_id;
$title = $entry>>名前;
}elseさんもしそうなら($values[subtype]== sidebar {
$IDの = $entry[id];
$title = $entry[name];
}elseさん{
$IDの = $entry;
$title = $keyとは;
}
もしそうなら ($values[std]== $IDの ){
$selectedです = “selected = selected '”;
}elseさん{
$selectedです = “”;
}
エコー ECHO“<option $selected value ='”. $IDの.“‘>”. $title.“</option>”;
}
エコー ECHO ‘</select>’;
エコー ECHO $values[desc]。'<br/></p>’;
エコー ECHO ‘<br/>’;
}
//編集者
関数の定義 tinymce$values){
もしそうならisset$thisのdatabase_options [$values[id]
$values[std] = $thisのdatabase_options [$values[ID];
エコー ECHO ‘<p>’.$values[name]。'</p>’;
wp_editor $values[std] $values[ID];
//wp_editor $values [std] contentarray dfw => true tabfocus_elements => sample-permalink post-preview editor_height => 360;
//設定パラメータ付き
/*wp_editor $meta_box [std]$meta_box [name]._ value $settings = array quicktags=>0//htmlモードをキャンセルする
tinymce=>1//視覚化モード
media_buttons=>0//メディアのアップロードを取り消す
textarea_rows =>5、//行数を5に設定
editor_class =>'textareastyle'; */
}
}
?>