如何在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

请参阅jQuery中的slideToggle()，其中两个或多个元素可以通过幻灯片效果切换

示例小提琴：http://jsfiddle.net/Y2beF/1/

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

Answer 2

你必须将$ output输入一个链接（一个href）来生成一个弹出窗口或javascript来驱动/启动一个灯箱（即ColorBox）。