I'm starting to use innerHTML quite a lot with Javascript.
I've also just started using Parcel Bundler.
My problem is that all of my href links and img src file paths don't seem to be working while using innerHTML.
I should also mention that the img links already in the html file are working fine. and I'm using ./ for the innerHTML assigned to the same html file so I can't see any file path issues. Furthermore, if I copy and paste the innerHTML from the JS file into the HTML file the images work fine so it absolutely can't be a file path issue.
There is a lot of code so I'd rather not flood this questions with lines upon lines however this is what I believe to be the relevant code:
I'm using grid-template-areas and flexbox. 'main' being one of my template-area's.
HTML:
<main>
<div class="list-box">
<div class="nav-panel">
<a class="nav-div-l nav-pic-bg hover"><img class="nav-pic-l nav-img" src="./img/arrow-left.png" alt="Logout Arrow">
<h2 id="logout-btn">Logout</h2></a>
<a id="user-btn" class="nav-div-c hover"><img class="nav-pic-c nav-img" src="./img/user.jpg" alt="User Picture">
<h2>Username</h2></a>
<a id="settings-btn" class="nav-div-r hover hide-mobile"><h2>Settings</h2>
<img class="nav-pic-r nav-img settings-img" src="./img/white-cog-hi.png" alt="Settings Cog"></a>
<a class="settings-btn hide-desktop"><img class="nav-img" src="./img/white-cog-hi.png" alt="Settings Cog"></a>
</div>
<div id="settings"></div>
<div id="user"></div>
<div id="lists"></div>
</div>
</main>
At the top of this JS file you'll notice a module import. This is simply JS data for the website.
JS:
import data from './data.js';
const settingsBtn = document.getElementById('settings-btn'); // nav links
const logoutBtn = document.getElementById('logout-btn');
const userBtn = document.getElementById('user-btn');
const lists = document.getElementById('lists');
const settings = document.getElementById('settings');
const user = document.getElementById('user');
logoutBtn.addEventListener('click', () => { // change to lists page
displayLists();
settingsBtn.style.display = 'flex';
logoutBtn.innerHTML = 'Logout';
userBtn.style.display = 'flex';
settings.innerHTML = '';
user.innerHTML = '';
});
userBtn.addEventListener('click', () => { // change to user page
displayUser();
settingsBtn.style.display = 'flex';
logoutBtn.innerHTML = 'Back';
userBtn.style.display = 'none';
lists.innerHTML = '';
settings.innerHTML = '';
});
settingsBtn.addEventListener('click', () => { // change to settings page
displaySettings();
settingsBtn.style.display = 'none';
logoutBtn.innerHTML = 'Back';
userBtn.style.display = 'flex';
lists.innerHTML = '';
user.innerHTML = '';
});
const displayLists = () => { // lists
lists.innerHTML += `
<div class="category-panel hide-mobile">
<h3>Name:</h3>
<div class="category-sections">
<div class="category-l"><h3>Items:</h3></div>
<div class="category-c"><h3>Reminders:</h3></div>
<div class="category-r"><h3>Created:</h3></div>
</div>
</div>
`;
for (let i = 0; i < data.lists.length; i++) {
let obj = eval(data.lists[i]);
let totalReminders = getTotalReminders(obj);
lists.innerHTML += `
<a href="./list.html">
<div class="list-item">
<p>${obj.name}</p>
<div class="category-sections">
<p class="category-circle-border">${obj.items.length}</p>
<p class="category-circle-border">${totalReminders}</p>
<p class="date-width">${obj.created}</p>
</div>
</div>
</a>
`;
}
};
const getTotalReminders = passed => {
let total = 0;
for (let i = 0; i < passed.items.length; i++) {
total += passed.items[i].reminders;
}
return total;
};
displayLists();
const displaySettings = () => {
settings.innerHTML = `
<div class="row-auto">
<div class="flex-column hover">
<img class="api-img" src="./img/apple.png" alt="Apple Logo">
<div class="flex">
<h3>Connected</h3>
<div class="circle api-colour-online"></div>
</div>
</div>
<div class="flex-column hover">
<img class="api-img" src="./img/windows.png" alt="Windows Logo">
<div class="flex">
<h3>Connected</h3>
<div class="circle api-colour-online"></div>
</div>
</div>
<div class="flex-column hover">
<img class="api-img" src="./img/android.png" alt="Android Logo">
<div class="flex">
<h3>Not Connected</h3>
<div class="circle api-colour-offline"></div>
</div>
</div>
<div class="flex-column hover">
<img class="api-img" src="./img/google.png" alt="Google Logo">
<div class="flex">
<h3>Connected</h3>
<div class="circle api-colour-online"></div>
</div>
</div>
</div>
<div class="row-auto-c">
<h3>Background:</h3>
</div>
<div class="flex settings-bg-contain-padding">
<img class="settings-bg-pic hover" src="./img/background-0.jpg" alt="Background 1">
<img class="settings-bg-pic hover" src="./img/background-1.jpg" alt="Background 2">
<img class="settings-bg-pic hover" src="./img/background-2.jpg" alt="Background 3">
<img class="settings-bg-pic hover" src="./img/background-3.jpg" alt="Background 4">
<img class="settings-bg-pic hover" src="./img/background-4.jpg" alt="Background 5">
<img class="settings-bg-pic hover" src="./img/background-5.jpg" alt="Background 6">
<div class="hover">
<img class="settings-bg-pic-upload" src="./img/background-0.jpg" alt="Arrow Up">
<p class="black-text">Upload</p>
</div>
</div>
<div class="row-auto">
<div class="flex-column">
<h3>Background On</h3>
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="flex-column">
<h3>Random Slider</h3>
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="flex-column">
<h3>24h Time</h3>
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
</div>
`;
const getBG = document.getElementsByClassName('settings-bg-pic');
const changeBG = BG => { // settings background change
for (let i = 0; i < BG.length; i++) {
BG[i].addEventListener('click', () => {
document.body.style.backgroundImage = `url(./img/background-${[i]}.jpg)`;
});
}
};
changeBG(getBG);
const slide = document.querySelectorAll('.slider');
const sliders = (slide) => { // sliders
slide.forEach(slider => slider.addEventListener('click', (i) => {
i.currentTarget.querySelector('.slider-circle').classList.toggle('slider-checked');
}));
};
sliders(slide);
}
const displayUser = () => {
user.innerHTML = ``;
}
While running Parcel Bundler if I click on my links it simply reloads the page and all of my img's are broken with the alt showing.
Ok I found the solution. The problem was with Parcel Bundler and how it bundles the img files to the dist folder. It doesn't like simply putting img src file paths in the innerHTML. It wants you to import the img's into the JS its self. Here is my solution:
import arrowUp from '../img/arrow-up.png';
import arrowDown from '../img/arrow-down.png';
import arrowLeft from '../img/arrow-left.png';
import arrowRight from '../img/arrow-right.png';
import user from '../img/user.jpg';
import apiApple from '../img/apple.png';
import apiWindows from '../img/windows.png';
import apiAndroid from '../img/android.png';
import apiGoogle from '../img/google.png';
import plus from '../img/add.png';
import tick from '../img/tick-green.png';
import cog from '../img/cog.png';
import bin from '../img/bin.png';
import doc from '../img/document.png';
import lock from '../img/lock.png';
import png from '../img/save.png';
import BG0 from '../img/background-0.jpg';
import BG1 from '../img/background-1.jpg';
import BG2 from '../img/background-2.jpg';
import BG3 from '../img/background-3.jpg';
import BG4 from '../img/background-4.jpg';
import BG5 from '../img/background-5.jpg';
import fb from '../img/facebook.png';
import insta from '../img/insta.png';
import twitter from '../img/twitter.png';
module.exports = {
arrows: [
arrowUp, arrowDown, arrowLeft, arrowRight,
],
symbols: [
plus, tick, cog, bin, doc, lock, png,
],
user: [
user,
],
bgImg: [
BG0, BG1, BG2, BG3, BG4, BG5,
],
apiImg: [
apiApple, apiWindows, apiAndroid, apiGoogle,
],
footer: [
fb, insta, twitter,
],
}
Main JS:
import img from './images.js';
<div class="flex settings-bg-contain-padding">
<img class="settings-bg-pic hover" src="${img.bgImgs[0]}" alt="Background 1">
<img class="settings-bg-pic hover" src="${img.bgImgs[1]}" alt="Background 2">
<img class="settings-bg-pic hover" src="${img.bgImgs[2]}" alt="Background 3">
<img class="settings-bg-pic hover" src="${img.bgImgs[3]}" alt="Background 4">
<img class="settings-bg-pic hover" src="${img.bgImgs[4]}" alt="Background 5">
<img class="settings-bg-pic hover" src="${img.bgImgs[5]}" alt="Background 6">
<div class="hover">
<img class="settings-bg-pic-upload" src="${img.bgImgs[0]}" alt="Arrow Up">
<p class="black-text">Upload</p>
</div>
</div>
Related
Spend much time but can't solve it. My CSS is OK. But why it is printing line by line in innerHTML? I am using an async function to get the data.
1st Function
const deploySnipCard = (getSnip) => {
for (x in getSnip) {
const tech = getSnip[x].tech;
const tags = getSnip[x].tags;
const tagsUrl = getSnip[x].tagsUrl;
const status = getSnip[x].status;
const imgSrc = getSnip[x].imgSrc;
const imgUrl = getSnip[x].imgUrl;
const caption = getSnip[x].caption;
appendCard(tech, tags, tagsUrl, status, imgSrc, imgUrl, caption);
}
};
2nd Function
const appendCard = (tech, tags, tagsUrl, status, imgSrc, imgUrl, caption) => {
const mainDiv = document.getElementById("root");
mainDiv.innerHTML += `
<div class="col-12 col-lg-4 col-md-6">
<div class="snip-card mt-5 p-2">
<div class="d-flex justify-content-between">
<div>
<span class="badge bg-primary mb-2">${tech}</span>
<a href="${tagsUrl}">
<span class="badge bg-danger mb-2 mx-1">${tags}</span></a>
</div>
<div>
<span class="badge bg-success mb-2">${status}</span>
</div>
</div>
<a href="${imgUrl}">
<div class="bg-dark">
<img class="card-img img-fluid" alt="click here" loading="lazy"
src="${imgSrc}">
</div>
</a>
<p class="snip-card-cap my-2">${caption}</p>
</div>
</div>`;
};
Output:
Expected Output:
I have four components when you hover the mouse over the picture, a certain component is displayed, the problem is that my components are displayed ugly without animation, I want to do so that when I hover over the picture, my components are displayed in an animated way from top to bottom.
As you can see, I have four pictures, for example, when you hover over the first picture, the first component is displayed when you hover over the second, the second component, and so on.
<div class="EnjoyGirlsList">
<div #mouseover="mouseOver1" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-1.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #74C8C5" class="EnjoyCardChildContainer">
<h3>Teens</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver2" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-2.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #76ED00" class="EnjoyCardChildContainer">
<h3>Minxes</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver3" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-3.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #FFE600" class="EnjoyCardChildContainer">
<h3>MILFS</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver4" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-4.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #CC003D" class="EnjoyCardChildContainer">
<h3>COURGARS</h3>
</div>
</div>
</div>
</div>
</div>
<div class="EnjoyGirlsHoverEffect">
<EnjoyBlue v-show="img1"/>
<EnjoyGreen v-show="img2"/>
<EnjoyYellow v-show="img3" />
<EnjoyRed v-show="img4" />
</div>
export default {
name: "HomePage",
components: {EnjoyRed, EnjoyYellow, EnjoyGreen, EnjoyBlue, Navbar, GirlsSectionList, FeaturedShows,},
data() {
return {
img1: false,
img2: false,
img3: false,
img4: false,
}
},
methods: {
mouseOver1: function(){
this.img1 = true
},
mouseOver2: function(){
this.img2 = true
},
mouseOver3: function(){
this.img3 = true
},
mouseOver4: function(){
this.img4 = true
},
mouseout: function() {
this.img1 = false;
this.img2 = false;
this.img3 = false;
this.img4 = false;
}
}
}
<div style="margin-top: 50px;">
<slide-y-up-transition>
<RedExperience v-show="img1" />
</slide-y-up-transition>
<slide-y-up-transition>
<OrangeExperience v-show="img2" />
</slide-y-up-transition>
<slide-y-up-transition>
<GreenExperience v-show="img4" />
</slide-y-up-transition>
<slide-y-up-transition>
<BlueExperience v-show="img3" />
</slide-y-up-transition>
</div>
import {SlideYUpTransition} from 'vue2-transitions'
components: {SlideYUpTransition},
I am trying to create a function that returns an additional display of none when you click on a button. It basically filters divs with class names when you click a button. I used a while/do loop to go through all the elements by class name.
In the browser console log it is telling me
"Cannot read property 'style' of undefined".
Does anybody knows what might be the problem?
<div class="container">
<h1 id="title">World's Top suppply chains</h1>
<div class="options">
<button id="allbtn">All</button>
<button>Drinks</button>
<button>Clothing</button>
<button>Cars</button>
<button id="fast-food-btn">Fast Food</button>
</div>
<div class="stores">
<div class="store">
<img src="images/adidas.png">
<h3>Adidas</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/corona.png">
<h3>Corona</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/nike.jpg">
<h3>Nike</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/lambo.png">
<h3>Lamborghini</h3>
<p class="industry">Cars</p>
</div>
<div class="store">
<img src="images/smirnoff.png">
<h3>Smirnoff</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/pepsi.jpg">
<h3>Pepsi</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/gucci.png">
<h3>Gucci</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/heineken.jpg">
<h3>Heineken</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/lacoste.png">
<h3>Lacoste</h3>
<p class="industry">Clothing</p>
</div>
<div class="store">
<img src="images/ferrari.png">
<h3>Ferrari</h3>
<p class="industry">Cars</p>
</div>
<div class="store">
<img src="images/pizzahut.png">
<h3>Pizza Hut</h3>
<p class="industry">Fast Food</p>
</div>
<div class="store">
<img src="images/cocacola.png">
<h3>Coca Cola</h3>
<p class="industry">Drinks</p>
</div>
<div class="store">
<img src="images/mc.png">
<h3>Mc Donalds</h3>
<p class="industry">Fast Food</p>
</div>
</div>
</div>
<script>
const industry = document.getElementsByClassName(".industry");
const fastFood = document.getElementById("fast-food-btn");
allbtn.addEventListener("click", filter);
function filter(){
const card = industry.parentElement;
do{
card.style.display = "none";
}
while(industry.innerHTML === "Fast Food");
}
</script>
First issue is that you don't need the dot in front of the class when using getElementsByClassName.
Secondly getElementsByClassName returns a HTMLCollection which does not have a property called parent.
Which results in something like this:
function filter() {
const industries = document.getElementsByClassName("industry");
for (let industry of industries) {
industry.style.display = "none";
}
}
Furthermore, it looks like the variable fastFood is not used and the variable allbtn is undefined. I assume it shoul be something like this:
const allbtn = document.getElementById("allbtn");
Putting it together, this should solve your problem:
<script>
function filter() {
const industries = document.getElementsByClassName("industry");
for (let industry of industries) {
industry.style.display = "none";
}
}
const allbtn = document.getElementById("allbtn");
allbtn.addEventListener("click", filter);
</script>
I'm building a simple html/css/vanilla js component to display images. I have the list of images on the top, and when I click on one of them, it must appear in the main container.
To do that I just change the img element src like this:
document.addEventListener('DOMContentLoaded', (event) => {
var mainImg = document.getElementById("mainImg");
var thumbnailContainer = document.getElementById("thumbnailContainer");
thumbnailContainer.addEventListener("click", (event) => {
var linkClicked = event.target.currentSrc;
mainImg.src = linkClicked;
});
});
Now I would like to add some animation, but I have some trouble with css transition, here's my html:
<div class="container">
<img id="mainImg" src="xxxxx" alt="car 2"/>
<div id="thumbnailContainer" class="thumbnailContainer">
<div class="thumbnail">
<img src="xxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
</div>
</div>
The thing that is bugging me is that the element that I click to trigger the transition doesn't need to change, but I just change the src property on the main image with JS.
How can I solve this?
I have the main image and a zoom icon for it and I have an image next to the first image. I wanna write a JavaScript code where when I click on the second image it changes the first image scr and the zoom icon's href link I found a code for it, but I can't make it work. This is the code I have so far:
<script type="text/javascript">
function change(menuId, image, newImage, newUrl)
{
var img = document.getElementById(image);
img.src = newImage;
document.getElementById('d3').href = newUrl;
}
</script>
and i tried to do make it work like that
<script type="text/javascript">
function change(menuId, image, newImage, newUrl)
{
var img = document.getElementById(image);
img.src = newImage;
document.getElementById('d3').href = newUrl;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt=""/>
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span></a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage("assets/example/latest/S8621A.png")' >
<img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById'("d3").href = '(assets/example/latest/S8621B.png)'>
</div></div>
I just don't know how it should work. I really don't understand that whole JavaScript. Can someone help me or show me how will it work? THX for the help.
As others have already said, change() should be changeImage() or vice versa.
There was no obvious target for the MenuId parameter so it's removed.
Made the zoomImage() function just for the hell of it.
Click any of the bottom images and the top one changes and the GO link's href changes as well.
The zoom icon will enlarge the top image by 50% without leaving the page.
Added 2 more functions…not sure what OP wants.
imageZoom() will use transform: scale() to zoom the image.
resetImage() will reset the image back to 128px
Snippet
img {
cursor: pointer;
}
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script type="text/javascript">
function changeImage(newImage, newUrl) {
var img = document.getElementById('img');
img.src = newImage;
document.getElementById('goto').href = newUrl;
return false;
}
function zoomImage() {
var img = document.getElementById('img');
if (img.style.width == "192px") {
img.style.width = "128px"
} else {
img.style.width = "192px";
}
return false;
}
function imageZoom() {
var img = document.getElementById('img');
if (img.style.width == "512px") {
img.style.transform = "scale(.25)";
} else {
img.style.transform = "scale(4)";
}
return false;;
}
function resetImage() {
var img = document.getElementById('img');
img.style.width = "0px";
img.style.transform = "scale(1)"
img.style.width = "128px";
return false;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" alt="" width="128" />
<div class="caption">
<div class="ico-block">
<a id="goto" href="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png">GO</a>
<a class="ico-big" href="#" id="d3" width="32" onclick="zoomImage();">
<img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/32/Zoom-In-icon.png" />
</a>
<a class="ico-zoom" href="#" id="3d" width="32" onclick="imageZoom();">
<img src="https://image.freepik.com/free-icon/zoom-in-pc_318-11477.jpg" width="32" />
</a>
</div>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='http://i44.tinypic.com/2uxz43b.jpg' onclick='changeImage("http://cnx.org/resources/b785d2ec9b6302264f1ed942f4ec1b822d6f7b4c/lena.jpg", "http://cnx.org/resources/b785d2ec9b6302264f1ed942f4ec1b822d6f7b4c/lena.jpg")' width="128">
<img src='http://www.log85.com/tmp/doc/img/perfectas/lenna/lenna1.jpg' onclick='changeImage("http://lh3.ggpht.com/_ERXQs5oLNgE/S01Ee_26lsI/AAAAAAAAAlY/1T0Dl4QJiYk/s800/lenaV.jpg", "http://lh3.ggpht.com/_ERXQs5oLNgE/S01Ee_26lsI/AAAAAAAAAlY/1T0Dl4QJiYk/s800/lenaV.jpg")'
width="128">
<button onclick="resetImage();">RESET</button>
</div>
</div>
First you need to make sure the js function works.
Second, <img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById'("d3").href = '(assets/example/latest/S8621B.png)'> is not right, it should be
<img src='assets/img/barna.png' onclick='changeImage("assets/example/latest/S8621B.png")' onclick='document.getElementById("d3").href = "assets/example/latest/S8621B.png"'> if my understanding is right.
Small description would be: you just need to assign clicked image to zoom icon to give it toggle effect.[that we doing by getElementById("d3") part
<script type="text/javascript">
function changeImage(element,newUrl) {
element.src = newUrl;
document.getElementById("d3").href= newUrl;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt=""/>
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span></a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
<img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")'>
</div>
</div></div>
This should do it:
function changeImage(element,newUrl) {
element.src = newUrl;
document.getElementById('d3').href = newUrl;
}
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt="" />
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span>
</a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
<img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")' onclick='document.getElementById' ( "d3").href='(assets/example/latest/S8621B.png)'>
</div>
</div>
Hey Robert Updated now
<!-- start: Portfolio -->
<section id="portfolio-grid" class="portfolio">
<article class="javascript html">
<script type="text/javascript">
function changeImage(element,newUrl) {
element.src = newUrl;
document.getElementById('d3').href = newUrl;
}
</script>
<div class="thumbnail">
<div id="main_img">
<img id="img" src="assets/example/latest/S8621A.png" alt="" />
<div class="caption">
<span class="ico-block">
<a class="ico-zoom" href="assets/example/latest/S8621A.png" id="d3"><span></span>
</a>
</span>
</div>
</div>
</div>
<div style="text-align:center">
<div id="thumb_img">
<img src='assets/img/fekete.png' onclick='changeImage(this, "assets/example/latest/S8621A.png")'>
<img src='assets/img/barna.png' onclick='changeImage(this, "assets/example/latest/S8621B.png")'>
</div>
</div>