我想在Wordpress中的图库缩略图下方放置预览图像
[英]I want to place a preview image below thumbnails of my gallery in wordpress
问题描述
This is the layout of what I'm trying to achieve: 
这是我要实现的布局：
I used this code and it works fine on HTML but I don't know how to use in WordPress. 我使用了这段代码，它在HTML上运行良好，但我不知道如何在WordPress中使用。 Could you help integrate it into Wordpress? 您能否将其集成到Wordpress中？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Simple HTML Photo Gallery with JavaScript</title> <style type="text/css"> body { background: #222; color: #eee; margin-top: 20px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } a { color: #FFF; } a:hover { color: yellow; text-decoration: underline; } .thumbnails img { height: 80px; border: 4px solid #555; padding: 1px; margin: 0 10px 10px 0; } .thumbnails img:hover { border: 4px solid #00ccff; cursor:pointer; } .preview img { border: 4px solid #444; padding: 1px; width: 800px; } </style> </head> <body> <div class="gallery" align="center"> <h2>Simple Photo Gallery with HTML and JavaScript</h2> <br /> <div class="thumbnails"> <img onclick="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/> <img onclick="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/> <img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/> <img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/> <img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/> </div><br/> <div class="preview" align="center"> <img name="preview" src="images/img1.jpg" alt=""/> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 2017-08-28 16:13:16
To write in HTML in a WordPress site: 要在WordPress网站中用HTML编写：
- In the Post or Page panel, switch to the HTML/Text Editor. 在“帖子”或“页面”面板中，切换到“ HTML /文本编辑器”。
- Move your cursor to the spot where you wish to add the HTML. 将光标移到要添加HTML的位置。
- Paste or type the HTML in. 粘贴或键入HTML。
- Save the draft, publish, or switch back to the Visual Editor to continue. 保存草稿，发布或切换回可视编辑器以继续。
One thing to note is that it will take some playing around to get the CSS to work right as there may be cases where the Wordpress default CSS interferes with your custom CSS styles. 需要注意的一件事是，要使CSS正常工作还需要花费一些时间，因为在某些情况下，Wordpress默认CSS会干扰您的自定义CSS样式。
Also, Visual Editor may not display all your tags correctly. 此外，Visual Editor可能无法正确显示所有标签。 To see how the user sees your HTML, preview it. 要查看用户如何查看您的HTML，请对其进行预览。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.