My problem is that when attempting to log an attribute from an image, when there are multiple images on the page, I am only able to log the first attribute.
Here's a fiddle.
http://jsfiddle.net/fauverism/b9kwT/4/
CSS
#page1, #page2, #page3, #page4 {
display: inline-block;
}
.active-page {
border: 4px groove seagreen;
}
.inactive-page-unlocked {
border: 4px ridge papayawhip;
}
.modalbg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
background: rgba(0, 0, 0, 0);
z-index: 1000;
transition: all 0.2s ease-out;
pointer-events: none;
}
.modalbg .dialog {
display: inline-flex;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
margin: auto;
background-clip: contain;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.modalbg:target {
opacity: 1;
pointer-events: auto;
background: rgba(0, 0, 0, 0.6);
transition: all 0.2s ease-out;
}
HTML
<div class="main-content">
<div id="page1" class="active-page">
<a class="magnify" href="#zoomWindow100100.GIF">
<img id="100100.GIF-img" name="100100.GIF" src="http://placekitten.com/100/100">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow100100.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/100/100)"></div>
</div>
</a>
</div>
<div id="page2" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow120120.GIF">
<img id="120120.GIF-img" name="120120.GIF" src="http://placekitten.com/120/120">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow120120.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/120/120)"></div>
</div>
</a>
</div>
<div id="page3" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow140140.GIF">
<img id="140140.GIF-img" name="140140.GIF" src="http://placekitten.com/140/140">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow140140.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/140/140)"></div>
</div>
</a>
</div>
<div id="page4" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow160160.GIF">
<img id="160160.GIF-img" name="160160.GIF" src="http://placekitten.com/160/160">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow160160.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/160/160)"></div>
</div>
</a>
</div>
JavaScript
function openZoomWindow() {
$('.magnify').on('click', function() {
var nameVal = $('img').attr('id');
console.log("show_inline_exhibit","name="+nameVal);
});
}
function closeZoomWindow() {
$('.modal-container').on('click', function() {
var nameVal = $('.modalbg').attr('id');
console.log("show_inline_exhibit","id="+nameVal);
});
}
openZoomWindow();
closeZoomWindow();
Some details...
I've tried using this in various ways to no avail. I've tried using .each() .children(). No dice. I tried using onclick to instantiate the functions.
I don't have to log the id attribute. Logging the name will work just fine.
Thanks so much for reading this and thanks in advance for helping out if you're submitting code. This has had me stumped.
You need to select the element you're clicking on, so find the img inside the anchor:
var nameVal = $(this).find('img').attr('id');
Related
I'm trying to blur the background when I click on an image and it popup.
I already have it where it blurs a section of the page. However, you can see anything that is outside of that section not blur-out.
CSS
.content2#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
#popup{ /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active{
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
HTML
<section class="port" id="pLink">
<div class="heading" id="blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2" id="blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="../mywebsite/img/bp.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="../mywebsite/img/bp.jpg" class="img-1">
</div>
</section>
<div class="footer">
<p>Copyright</p>
</div>
JavaScript
function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
I tried adding the same id="blur" to the footer but the problem is that it only works for one <div>.
I also tried adding a separate css code for let say `class="footer" but it doesn't work.
.footer#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
I also tried moving the id tag to the section, but that only blurs the heading not the rest.
All you have to do is to add a "blur" class to anyone element you want to get the effect when the image is clicked.
The changes I made:
Change in CSS #blur to .blur
JS - The function takes all elements with class .blur and has add or remove class .active
HTML - added classes .blur to all elements that need to be blurred.
In one document you can have many classes with the same name, but you can have only one element with a unique ID! This is the reason I change the blur from ID to CLASS
function toggle() {
var blur = document.getElementsByClassName('blur');
for (var i = 0; i < blur.length; i++) {
blur[i].classList.toggle('active');
}
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
.blur.active {
filter: blur(2px);
pointer-events: none;
user-select: none;
}
#popup {
/*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active {
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
<section class="port" id="pLink">
<div class="heading blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2 blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="https://blog.54ka.org/wp-content/uploads/2020/09/horse-galloping-close-up-action-photography_by_54ka-165x165.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="https://blog.54ka.org/wp-content/uploads/2012/07/horses_XI_01_by_54ka.jpg" class="img-1">
</div>
</section>
<div class="footer blur">
<p>Copyright</p>
</div>
Hello,
I have a working navigation bar sliding out of the page when the user clicks on the menu icon. It shows up only on mobile version of the website.
When u want to close the bar, you click on "x" or outside the div, somewhere in the background.
When I click on a section name, the page refreshes and the navigation closes. The problem appears when I click on the current section. The page does not refresh, so you have to close the navigation manually.
I want my navigation bar to close everytime an user clicks a link. Do you have any idea how can I achieve that?
This is my website: https://www.poznanprzeprowadzki.pl
This is my html for this part:
<div id="menu-mobile" class="menu-mobile">
<div class="menu-mobile-close" onclick=closeNav()>
<p>x</p>
</div>
<div class="menu-mobile-header">
<img src="img/poznanprzeprowadzki_logo3.png" name="Poznań przeprowadzki logo" alt="Poznań przeprowadzki logo"></a>
<p class="lang" key="you-are-free-to-contact">Zapraszamy do kontaktu!</p>
</div>
<a href="index.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/Home_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="home">Strona główna</p>
</div>
</div></a>
<a href="about.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="20px" src="img/About_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="about">O nas</p>
</div>
</div></a>
<a href="gallery.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Gallery_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="gallery">Galeria</p>
</div>
</div></a>
<a href="contact.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="20px" height="15px" src="img/Contact_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="contact">Kontakt</p>
</div>
</div></a>
<a href="advices.php#indexmain"><div class="dropdown-content-item">
<div class="dropdown-content-item-icon">
<img width="15px" height="20px" src="img/Advices2_icon_white.png">
</div>
<div class="dropdown-content-item-text">
<p class="lang" key="advices">Pomoc / Porady</p>
</div>
</div></a>
</div>
<div id="menu-mobile-background" class="menu-mobile-background" onclick=closeNav()>
</div>
This is my css for this part:
.menu-mobile {
display: block;
height: 100%;
width: 250px;
position: fixed;
z-index: 9999;
top: 0;
right: -255px;
background-color: rgba(100,100,100,1);
overflow-x: hidden;
transition: 0.4s;
}
.menu-mobile-close {
position: absolute;
top: 5px;
right: 10px;
transition: 0.05s;
}
.menu-mobile-background {
right: 0;
top: 0;
position: fixed;
overflow: hidden;
z-index: 9998;
width: 0px;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.menu-mobile-header {
min-width: 250px;
padding: 16px;
text-align: center;
background-color: white;
}
.menu-mobile-header p {
font-family: Open Sans;
font-size: 14px;
color: rgba(100,100,100,1);
padding: 2px;
font-weight: 500;
display: block;
white-space: nowrap;
}
.menu-mobile-header img {
margin: 0 auto;
height: 65px;
padding-bottom: 6px;
}
.menu-mobile-close p:hover {
color: rgba(240,240,240,1);
cursor: pointer;
}
.menu-mobile-close p {
font-family: Open Sans;
font-size: 18px;
color: rgba(100,100,100,1);
font-weight: 600;
display: block;
}
This is my JS for this part:
function openNav() {
document.getElementById("menu-mobile").style.right = "0px";
document.getElementById("menu-mobile-background").style.width = "100%";
}
function closeNav() {
document.getElementById("menu-mobile").style.right = "-255px";
document.getElementById("menu-mobile-background").style.width = "0px";
}
Here is a picture of my navigation bar:
Add this script in your js file:
$(document).ready(function() {
$('.menu-mobile a').click(function(e) {
e.preventDefault(); // if the link don't reload all the page
closeNav();
})
});
Another solution, if you want to wait something before redirect:
$(document).ready(function() {
$('.menu-mobile a').click(function(e) {
e.preventDefault(); // is required
closeNav();
setTimeout(() => {
const nextPage = e.currentTarget.href;
window.location.href = nextPage;
},1000) // set the time here in milliseconds
})
});
As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>
Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this
I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.
I have no idea why this happens and I've already googled it. I've made a slideshow that scrolls the leftmost element outside of screen then appends it to the end of the container. That function itself seems to work as expected. However the animation only shows when I'm moving my mouse so something is wrong here.
Any idea of what?
Without moving mouse: https://gyazo.com/78048123b10e1d2683b102419761c0ef
When moving mouse: https://gyazo.com/f10bf8a10bc119840bd6b5b1168e79db
Html:
<section class="photo-grid-slideshow">
<div class="photo-crop">
<h3>I wanna
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza1.jpg');"></div>
</div>
<div class="photo-crop">
<h3>Dance
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza3.jpg');"></div>
</div>
<div class="photo-crop">
<h3>With you
<div class="xs-spacer"></div>
<a class="med-btn btn-white">Read more</a>
</h3>
<div class="photo-grid-container" style="background-image: url('Images and videos/odesza2.png');"></div>
</div>
</section>
Css:
.photo-crop {
display: inline-block;
overflow: hidden;
float: left;
width: calc(100% / 3);
height: 100%;
line-height: 100%;
margin: 0;
margin-right: 0;
padding: 0;
position: relative;
left: 0;
right: 0;
background-position: center center;
background-size: cover;
transition: all 0.2s;
text-align: left;
}
.photo-grid-slideshow {
height: 300px;
display: inline-block;
min-width: 100%;
position: relative;
background: black;
padding: none;
overflow: hidden;
background: #444;
}
Javascript:
$(function () {
var timer = setInterval(function() {
$(".photo-grid-slideshow .photo-crop:first-child").animate({marginLeft: '-=33vw'}, 1000, "linear", function() {
$(this).css("margin-left", 0).appendTo('.photo-grid-slideshow');
});
}, 1000);
});
I'm very thankful if ýou can help me get this to work. :)
I got it to work at least. The problem was that the .photo-crop class had transition: ALL on it. Because of that it couldn't animate it in jquery. Silly mistake, but for me it wasn't apparent.
Hope this can help someone else in the future!
I have a sidebar which is position:fixed; and overflow:auto; - this causes the scroll to happen within the fixed element.
Now when the sidebar is turned on, that element does not move, its just static on the page.
What i want to achieve: I would like to fix .super-image-thumb inside the scroll element, so when the scroll happens, the thumbnails at the top are fixed.
I have tried a javascript fix as well but its still not working. Any recommendations?
jQuery(function($) {
function fixDiv() {
var $cache = $('.super-image-thumb');
if ($('.sliding-panel-content').scrollTop() > 100)
$cache.css({
'position': 'fixed',
'top': '10px'
});
else
$cache.css({
'position': 'relative',
'top': 'auto'
});
}
$('.sliding-panel-content').scroll(fixDiv);
fixDiv();
});
.sliding-panel-content {
z-index: 1204;
}
.middle-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.middle-content {
position: fixed;
left: 8%;
top: auto;
width: 85%;
-webkit-transform: translateY(-115%);
-ms-transform: translateY(-115%);
transform: translateY(-115%);
transition: all .25s linear;
}
.sliding-panel-content {
overflow: auto;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.sliding-panel-content.is-visible {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="js-menu sliding-panel-content middle-content is-visible">
<span class="closeBtn sliding-panel-close"></span>
<div class="slide-content">
<div class="super-image-thumb">
<div id="product-gallery-super">
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=2">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>
<div class="main-image-container">
<img class="main-image" src="http://placehold.it/500x2045">
<button name="prev" id="super-prev">Prev</button>
<button name="next" id="super-next">Next</button>
</div>
</div>
</div>
Fixed inside Fixed is always buggy. Let's just change top: http://jsfiddle.net/s31edgao/
function fixDiv() {
$('.super-image-thumb').css({
'top': $('.sliding-panel-content').scrollTop()+'px'
});
}
$('.sliding-panel-content').scroll(fixDiv);
fixDiv();
Javascript for that will only make the things more complicated.
It is all about CSS, the position: fixed or absolute is always based on the first ancestor with position: relative, so you should play with it.
I would remove the jQuery code and add this CSS:
.slide-content {
position:relative;
}
.super-image-thumb {
position:fixed;
background: #FFF;
top:0;
width:100%;
z-index: 2;
}
.main-image-container {
position:absolute;
top:85px;
z-index: 0;
}
As in the jsfiddle
It looks like transitions and position: fixed does not work together in all browser, when you remove them, code works fine. Some solution for this you can find in css3 transform reverts position: fixed
I created snippet without transitions and also I removed JS part (I think is not needed), and propose CSS-only solution. It is not finished to the end, it needs some more aligments - but you can do it yourself - the way for solving your problem is clear, I think.
.sliding-panel-content {
z-index: 1204;
}
.middle-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.middle-content {
position: fixed;
left: 8%;
top: auto;
width: 85%;
}
.sliding-panel-content {
overflow: auto;
top: 0;
bottom: 0;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.super-image-thumb {
position: fixed;
top: 10px;
}
.main-image-container {
margin-top: 100px; // should be same as thumb height
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="js-menu sliding-panel-content middle-content is-visible">
<span class="closeBtn sliding-panel-close"></span>
<div class="slide-content">
<div class="super-image-thumb">
<div id="product-gallery-super">
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=1">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=2">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=3">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=4">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=5">
</a>
<a href="#" class="product-gallery">
<img src="http://placehold.it/61x79?text=6">
</a>
</div>
</div>
<div class="main-image-container">
<img class="main-image" src="http://placehold.it/500x2045">
<button name="prev" id="super-prev">Prev</button>
<button name="next" id="super-next">Next</button>
</div>
</div>
</div>