0

I am busy making a website for an architecture firm
I have a div with 100% height position on the right, with images inside this div
You can view this website here to see what I am talking about.
The arrows under the div make the margin-top of the first img within the div -135px of what it currently is. (done using Javascript)
My goal is to try and make the images within the div continuos forever so that when that after the last image comes the first image again. (Obviously without having to copy and paste the images over and over again).
The HTML for the div:

<div id="rightPanel">
    <div id="first" style="margin-top:0px;" onclick="changeF('url(images/bg1.jpg)')"><img src="images/thumb.jpg" width="170px" height="113px"></div>
    <div onclick="changeF('green')"><img width="170px" style="background:green;" height="113px"></div>
    <div onclick="changeF('yellow')"><img width="170px" style="background:yellow;" height="113px"></div>
    <div onclick="changeF('purple')"><img width="170px" style="background:purple;" height="113px"></div>
    <div onclick="changeF('red')"><img width="170px" style="background:red;" height="113px"></div>
    <div onclick="changeF('blue')"><img width="170px" style="background:blue;" height="113px"></div>
    <div onclick="changeF('aqua')"><img width="170px" style="background:aqua;" height="113px"></div>
    <div onclick="changeF('orange')"><img width="170px" style="background:orange;" height="113px"></div>
    <div onclick="changeF('yellow')"><img width="170px" style="background:yellow;" height="113px"></div>
    <div onclick="changeF('white')"><img width="170px" style="background:white;" height="113px"></div>
    <div onclick="changeF('gray')"><img width="170px" style="background:gray;" height="113px"></div>
    <div onclick="changeF('pink')"><img width="170px" style="background:pink;" height="113px"></div>
    <div onclick="changeF('yellow')"><img width="170px" style="background:yellow;" height="113px"></div>
    <div onclick="changeF('purple')"><img width="170px" style="background:purple;" height="113px"></div>
    <div onclick="changeF('red')"><img width="170px" style="background:red;" height="113px"></div>
    <div onclick="changeF('blue')"><img width="170px" style="background:blue;" height="113px"></div>
    <div onclick="changeF('aqua')"><img width="170px" style="background:aqua;" height="113px"></div>
    <div onclick="changeF('orange')"><img width="170px" style="background:orange;" height="113px"></div>
    <div onclick="changeF('violet')"><img width="170px" style="background:violet;" height="113px"></div>
    <div onclick="changeF('white')"><img width="170px" style="background:white;" height="113px"></div>
    <div onclick="changeF('black')"><img width="170px" style="background:black;" height="113px"></div>
</div>

Is there any method that would make this possible?
Your answers are highly appreciated.

YSK .CO
  • 164
  • 1
  • 14
  • @RobSedgwick yes I do, do this of course, the `style="background:"` for those divs is just an exception so I do not have to assign a class / id to each one. Don't see how this could lead to me solving my problem? – YSK .CO Mar 02 '14 at 13:53
  • @RobSedgwick I understand why it is bad for the CSS however those colours are temporary and will be replaced with images where I will not use inline css. However for the js how do I call a javascript function, with a different argument each time onclick without using the `onclick="function(argument)"` event listener. Is that not what it's there for? – YSK .CO Mar 02 '14 at 14:11
  • or in `.html` -`
    ` - then in seperate `.js` - `$("div").click(function() { var color = $(this).attr("data-color") .. ` .. you tell me. Its all about code management. What if you you have 1 designer ( he doesn't want all that javascript and inline css ) and a separate front end developer ( he doesn't want all the markup ) - but even working alone - it's good and makes life easier.     – Rob Sedgwick Mar 02 '14 at 14:23
  • Like I say, doesn't help you directly with the question, but will create a better way forward to solving many jobs like this in the future. Good luck! – Rob Sedgwick Mar 02 '14 at 14:28

1 Answers1

1

Rather than shuffle the images up 135px, why not simply remove the top image and append it to the bottom? 

var rightPanel = document.getElementById('rightPanel');
var images = rightPanel.getElementsByTagName('img');
var downButton = document.getElementById('downButton');
var upButton = document.getElementById('upButton');

downButton.onclick = function(){
    rightPanel.appendChild(images[0]);
}
upButton.onclick = function(){
    rightPanel.insertBefore(images[images.length-1],images[0]);
}

Here's a simple jsFiddle to illustrate what I mean.

Moob
  • 14,420
  • 1
  • 34
  • 47
  • Hi @Moob really appreciate your answer, it is exactly what I was looking for and works perfectly in jsFiddle, however was not working in my website, so I recreated (copy and pasted) it on a real HTML page here http://www.ysk.co.za/infiniteImg.html and still would not work, dont understand how it works in Jsfiddle but not on real HTML, any suggestions? – YSK .CO Mar 02 '14 at 19:13
  • 1
    @YSK.CO Your ` – Moob Mar 02 '14 at 19:31
  • If you must keep the script in the `` you'll need to use `window.onload` to call the function. EG http://jsfiddle.net/77kxh/5/ but be aware that you can only have one such listener. See: [Best practice for using window.onload](http://stackoverflow.com/questions/559150/best-practice-for-using-window-onload) and [how to call a function when the page/dom is ready for it](http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the) – Moob Mar 02 '14 at 19:46