[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Changing Images In A Div

Posted on 2014-08-31
8
Medium Priority
?
148 Views
Last Modified: 2014-09-01
On the following link:
http://www.schuremediagroup.com/portfolio%20-%20Copy.html

I have a slider with 8 slides.  On each slide I have 6 images.  When the slide changes I want to change the image in each div.  How can I do this?  I attached the file that has the page.
portfolio---Copy.html
supersized.3.2.7.js
0
Comment
Question by:DS928
  • 4
  • 4
8 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40295577
with the current API, you could do something like this:

theme.afterAnimation(changeImages());

function changeImages(){
  // the code that changes images goes here

}

Open in new window

But this does not give you control over what images go with what slide. All it does is allow you to  execute some function every time a slide changes.

So, you can get the number of the current slide with:

vars.current_slide

Open in new window


putting it together, you might have some thing that looks like this:

theme.afterAnimation(changeImages());

function changeImages(){
   var currSlide = vars.current_slide;
   shuffleImages(currSlide);
  
}
function shuffleImages(idx){
   // code that shuffles images based on slide number
   // here you can decide which images will be hidden/shown (based on slide number)
}

Open in new window


let us know if you need more help
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40295584
or, to simplify, you could just do:

theme.afterAnimation(shuffleImages(vars.current_slide));

function shuffleImages(idx){
   // code that shuffles images based on slide number
   // here you can decide which images will be hidden/shown (based on slide number)
}

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40295602
then for the images shuffling, you might have a two dimentional array of images:

var allImages = [
  [slide1-img1.png, slide1-img2.png, slide1-img3.png],
  [slide2-img1.png, slide2-img2.png, slide2-img3.png],
  [slide3-img1.png, slide3-img2.png, slide3-img3.png]
  //etc..
]

Open in new window


you then populate the DOM with the correct images:

function shuffleImages(idx){
   // insert images into DOM from allImages[idx]
   var HTMLfrag = "", imgList = allImages[idx];
   for(var i = 0, l = imgList.length; i < l; i++){
      HTMLfrag += "<div><img src='imgList[i]'/></div>";
   }
  $("#base").html(HTMLfrag);
}

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:DS928
ID: 40295608
Looks like a good start, but exactly what code would go into here?

theme.afterAnimation(shuffleImages(vars.current_slide));

function shuffleImages(idx){
   // code that shuffles images based on slide number <--------What Code?
  <div id='1'>
   		<div>
   		  <img src="portfolio/adele.jpg" alt="Adele" width="200" height="136" class="lefty">
   		</div>
   </div>
<div id='2'>
   		<div>
   		  <img src="portfolio/adam.jpg" alt="Adam" width="200" height="136" class="lefty">
   		</div>
   </div>
}

Open in new window

0
 

Author Comment

by:DS928
ID: 40295631
I think we crossed while typing.  I will try this.
0
 

Author Comment

by:DS928
ID: 40296833
Having a problem here.
var allImages = [
  		[slide1-portfolio/bey.jpg, slide1-portfolio/adele.jpg, slide1-portfolio/adrian.jpg],
  		[slide2-img1.png, slide2-img2.png, slide2-img3.png],
  		[slide3-img1.png, slide3-img2.png, slide3-img3.png]
  		//etc..
		]

Open in new window

Not sure how to access or point to folder where the files are....
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 40296871
oh, sorry, you need quotes around the image paths:

["slide1-portfolio/bey.jpg", "slide1-portfolio/adele.jpg", "slide1-portfolio/adrian.jpg"]

the entry in the array becomes the image src. so, if you wanted something like this:

<img src="slide1-portfolio/adele.jpg"/>

Open in new window


then your array would look like this:

["slide1-portfolio/bey.jpg", "slide1-portfolio/adele.jpg", "slide1-portfolio/adrian.jpg"]

Open in new window


if you want to provide an absolute path, like this:

<img src="http://www.mysite.com/images/slide1-portfolio/adele.jpg"/>

Open in new window


then the array would be:

["http://www.mysite.com/images/slide1-portfolio/bey.jpg", "http://www.mysite.com/images/slide1-portfolio/adele.jpg", "http://www.mysite.com/images/slide1-portfolio/adrian.jpg"]

Open in new window

0
 

Author Closing Comment

by:DS928
ID: 40297468
Good Job!
Thank you!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question