I want to place a preview image below thumbnails of my gallery in wordpress
Question
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. Could you help integrate it into 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 answers
solution1
0 2017-08-28 16:13:16
To write in HTML in a WordPress site:
- In the Post or Page panel, switch to the HTML/Text Editor.
- Move your cursor to the spot where you wish to add the HTML.
- Paste or type the HTML in.
- 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.
Also, Visual Editor may not display all your tags correctly. To see how the user sees your HTML, preview it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.