CODEWITHSUNDEEP
javascriptjqueryhtmlcss
H3ll0W0rld
H3ll0W0rld

Reputation: 3

HTML/Javascript - path change for 360 degree picture (to show differen variations)

What I want to achieve:

I found a script to create a 360 degree image of an object (multiple pictures from different angles). That's not a problem and working, pretty basic but it's working :-)

In phase 2 now, I would like to have 4 buttons (each button for a different color variation of the pictures). So when I click, lets say the the yellow button it should load all pictures from folder img/yellow/.... if I click on red then from img/red/... the picture file names are the same just they show the object in different color in the different folder.

Thats the solution for 360 degree image:

@charset "utf-8";
body, ul, li {
  margin: 0;
  padding: 0;
}
ul, li {
  list-style: none;
}
.menu {
  width: 400px;
  height: 255px;
  border: 6px solid #ccc;
  margin: 30px auto 0;
  overflow: hidden;
}
.menu ul {
  width: 400px;
  height: 255px;
}
.menu ul li img {
  display: block;
  width: 400px;
  height: 255px;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>360 rotation Test</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="jquery-script-menu">
    <div class="jquery-script-center">
      <div class="jquery-script-clear"></div>
    </div>
  </div>
  <h1 style="margin-top:150px;" align="center";>Mini Image Rotation Plugin Example</h1>
  <div class="menu">
    <ul class="list">
      <li><img src="images/image1_1.jpg" /></li>
      <li><img src="images/image1_2.jpg" /></li>
      <li><img src="images/image1_3.jpg" /></li>
      <li><img src="images/image1_4.jpg" /></li>
      <li><img src="images/image1_5.jpg" /></li>
      <li><img src="images/image1_6.jpg" /></li>
      <li><img src="images/image1_7.jpg" /></li>
      <li><img src="images/image1_8.jpg" /></li>
      <li><img src="images/image1_9.jpg" /></li>
      <li><img src="images/image1_10.jpg" /></li>
      <li><img src="images/image1_11.jpg" /></li>
      <li><img src="images/image1_12.jpg" /></li>
      <li><img src="images/image1_13.jpg" /></li>
      <li><img src="images/image1_14.jpg" /></li>
      <li><img src="images/image1_15.jpg" /></li>
      <li><img src="images/image1_16.jpg" /></li>
      <li><img src="images/image1_17.jpg" /></li>
      <li><img src="images/image1_18.jpg" /></li>
    </ul>
  </div>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
    $(function(){
	  var pic_X=$('.list').offset().left;
   	  var pic_Y=$('.list').offset().top;
	  var pic_W=$('.list').width()/2;
  	  var pic_H=$('.list').height()/2;
	  var center_X=pic_X+pic_W;
	  var center_Y=pic_Y+pic_H;
	  var movestop=pic_W/10;
	  $('.list').mousemove(function(event){
		var mouse_X=event.pageX;
		var mouse_Y=event.pageY;
		if(mouse_X-center_X<=0){
			moveImg(mouse_X,mouse_Y,'left')
		}else{
			moveImg(mouse_X,mouse_Y)
		}
	  });
  	  function moveImg(m_X,m_Y,dir){
		var index=Math.ceil(Math.abs(m_X-center_X)/movestop);
		if(dir){
			$('.list li').eq(index).show().siblings().hide();
		}else{
			$('.list li').eq(18-index).show().siblings().hide();
		}
	  }
    })
  </script>
</body>
</html>

As you can see, the images are pulled from the folder and then changed via mousemove. Now, I want to have beside the display of the 360 picture some buttons for different colors, I have the same amount of pictures of the object in different colors and as mentioned each color will have a separate folder. How do I change the images path to img/COLOR/imageX.jpg when I click on a button for a specific color?

I hope thats not to confusing.

Upvotes: 0

Views: 907

Answers (1)

A.Sharma
A.Sharma

Reputation: 2799

You can create a variable that represents a color. You also have to make sure that all of the images are named in a similar format (with numbers like you have in your example given) with the exception of this color.

An example of the image names would be:

Yellow Images: "yellow1,yellow2,yellow3,etc."

Red Images: "red1, red2, red3, etc."

JQuery

var color = ""

$(".yellow-btn").click(function(){
 color = "yellow";
 $('.list img').each(function(index){
   this.attr('src', 'images/' + color + (index+1) + ".jpg") // you can change jpg to png as needed
 }
}

$(".red-btn").click(function(){
 color = "red";
 $('.list img').each(function(index){
   this.attr('src', 'images/' + color + (index+1) + ".jpg") // you can change jpg to png as needed
 }
}

$(".blue-btn").click(function(){
 color = "blue";
 $('.list img').each(function(index){
   this.attr('src', 'images/' + color + (index+1) + ".jpg") // you can change jpg to png as needed
 }
}

This is assuming that they are all 'jpg' or all 'png'. You would essentially copy that code for the different colored buttons.

Upvotes: 1

Related Questions