php - 如何在wordpress中制作一个包含图像和内容的弹出按钮

Question

here my functions.php
function avail_rooms(){

$output .= '<div class="main-room-image">';
$output .= '<div class="room-image"><img src="'.home_url ('/').'images/deluxe-room.jpg" alt="Deluxe Room" title="Deluxe Room" />';
$output .= '<div class="room-txt"><a href="'.get_permalink(177).'">Deluxe Room</a></div></div>';

$output .= '<div class="room-image"><img src="'.home_url ('/').'images/twin-deluxe-room.jpg" alt="Twin Deluxe Room" title="Twin Deluxe Room" />';
$output .= '<div class="room-txt"><a href="'.get_permalink(192).'">Twin Deluxe Room</a></div></div>';

$output .= '<div style="display:none;">';
$output .= '<div claas="room-image"><img src="'.home_url ('/').'images/sample-image.jpg" alt="" title="" />';
$output .= '<div class="room-txt">Sample</div></div>';
$output .= '</div>';

$output .= '</div>';


return $output;
}
add_shortcode('avail_rooms','avail_rooms');

非常感谢您的想法和共享信息..我想制作一个带有图像和内容的弹出框..

Answer 1

请参阅slideToggle()，jQuery其中使用幻灯片效果切换两个或多个元素

小提琴样本：http: //jsfiddle.net/Y2beF/1/

也检查一下：http: //jsfiddle.net/Y2beF/2/

Answer 2

您必须将 $output 放入 aa 链接（a href）以生成弹出窗口或 javascript 以驱动/启动灯箱（即ColorBox）。