I've been struggling with a problem that I know the right person can easily fix in one shot.
I need to create something similar to this site:
http://www.arcadiacontemporary.com/artists/index.php
However I need multiple artist columns/tables like this site:
https://collinsgalleries.com/ARTISTS5.html
I would like the mouseover to work the same however when it grabs the image, I would rather be able to use external files and URLs vs internal.
Both site uses jquery and bootstrap, which I need to integrate into a Wordpress website. I do not know jquery or bootstrap js so I'm trying my best to create it without.
The best I've got so far for code is:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
]
</style>
</head>
<body>
<a href="#"><div class="hover-img">
<table style="width: 100%"></table>
<th>Artist Name</th>
</tr>
<span><img src="https://collinsgalleries.com/images/Artist-Page-Monks.jpg" alt="image" height="fixed" /> </span>
</div></a>
<a href="#"><div class="hover-img">
<tr>
<th>Artist Name</td>
<span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Old_Friends.jpg" alt="image" height="fixed" /> </span>
</div></a>
<a href="#"><div class="hover-img">
<td>Artist Name</td>
<span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Beds.jpg" alt="image" height="fixed" /> </span>
</div>
</a>
<a href="#"><div class="hover-img">
<td>Artist Name</td>
<span><img src="https://collinsgalleries.com/images/Paul_Oxborough_MacBeth-frame.jpg" alt="image" height="fixed" /> </span>
</table>
</body>
</html>
then CSS
a .hover-img {
position:static;
}
a .hover-img span {
position:absolute; left:-9999px; top:-9999px; z-index:9999;
}
a:hover .hover-img span {
top: 1vw;
left:18vw;
}
td {
display: table-cell;
vertical-align: inherit;
}
The issue with this code is - The images aren't don't size the same in the middle. if I add a 3rd line the formatting breaks. And this needs to be mobile responsive as well.
I am open to all suggestions. Thank you in advance
Ok Firstly the reason you would use bootstrap is that it caters for both Mobile and desktop screen sizes without having to run any additional boilerplate code to resize the site for the browser ...
jquery is not necessary to achieve your goal but pure Vanilla JavaScript is .
This is how I would approach it
In the first instance I would replace the table component with a Layout called a flex box This would make your code easier to read and will dynamically lay itself out ...If you would like to read up further on flex box CSS styles here is the link Flex Box
The Second thing is I would write a simple JavaScript function to change the image onMouseOver .In order to give the JavaScript engine a handle to the DOM image component you need to allocat and "id" to it . Then you can use
let ObjName = document.getElementById('YourHtmlObject'). after that you can manipulate it with JS
I would use one image container and dynamically append the image source based on the artist Through a switch statement in JavaScript function
In order to get the image to zoom or scale onMouseover again I would simply place a CSS animation to do that
Vanilla JavaScript in your case would make your life allot simpler . It would be a good idea to learn the basics of it ... I have provided some code that should simplify the solution for you ... Let me know if you find this useful or need any further help
enjoy!
function ChangeImage(artistName) {
let img = document.getElementById('TheImage');
switch (artistName) {
case 'Rob':
// code block
img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_Old_Friends.jpg';
break;
case 'Amy':
// code block
img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_Beds.jpg';
break;
case 'Bob':
// code block
img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_MacBeth-frame.jpg';
break;
case 'Clare':
// code block
img.src = 'https://collinsgalleries.com/images/Artist-Page-Monks.jpg';
break;
default:
// code block
img.src = 'https://collinsgalleries.com/images/Artist-Page-Monks.jpg';
}
}.app-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.leftcontainer {
flex-direction: column;
justify-content: space-evenly;
}
.rightcontainer {
flex-direction: column;
justify-content: space-evenly;
}
.midcontainer {
flex-direction: column;
justify-content: space-evenly;
}
.zoom {
transition: transform .2s;
/* Animation */
}
.zoom:hover {
transform: scale(1.5);
/* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
/* position:absolute;
right:0;*/
}
#TheImage {
transition: transform .2s;
}<div class="app-container">
<div class="leftcontainer">
<div class="app-container">
<ul style="list-style: none;">
<li onmouseover="ChangeImage('Rob')">Rob</li>
<li onmouseover="ChangeImage('Amy')">Amy</li>
<li onmouseover="ChangeImage('Bob')">Bob</li>
<li onmouseover="ChangeImage('clare')">Clare</li>
</ul>
<ul style="list-style: none;">
<li onmouseover="ChangeImage('Rob')">Rob</li>
<li onmouseover="ChangeImage('Amy')">Amy</li>
<li onmouseover="ChangeImage('Bob')">Bob</li>
<li onmouseover="ChangeImage('clare')">Clare</li>
</ul>
</div>
</div>
<div class="midcontainer">
<span><img id='TheImage' class='zoom' src="https://collinsgalleries.com/images/Artist-Page-Monks.jpg" alt="image" height="300px" width="300px"/> </span>
</div>
<div class="rightcontainer">
<div class="app-container">
<ul style="list-style: none;">
<li onmouseover="ChangeImage('Rob')">Rob</li>
<li onmouseover="ChangeImage('Amy')">Amy</li>
<li onmouseover="ChangeImage('Bob')">Bob</li>
<li onmouseover="ChangeImage('clare')">Clare</li>
</ul>
<ul style="list-style: none;">
<li onmouseover="ChangeImage('Rob')">Rob</li>
<li onmouseover="ChangeImage('Amy')">Amy</li>
<li onmouseover="ChangeImage('Bob')">Bob</li>
<li onmouseover="ChangeImage('clare')">Clare</li>
</ul>
</div>
</div>
</div>