Question

http://buildinternet.com/project/supersized/

I’m having trouble figuring out the javascript that goes along with this jquery plugin. What I’m trying to do is merge this with more js plugins, namely, an accordion plugin I have. The end goal is to essentially have two instances of Supersized running on one screen with the same controls, different images. I know, hard to envision but here’s an example.

The body is full screen background with Supersized, the image is image1.jpg and it’s black and white. Then, I have a smaller div, 960px wide in the center of the body, with an accordion of all the images I want, but in color. So as you change the accordion, you change the background. So when you have image1.jpg in color in the accordion box, the background of body is image1.jpg black and white.

So I’m having trouble because the js for supersized seems to only define a prev and next thumbnail, not ALL the thumbnails. So in theory I would have to figure out how to disoplay all thumbnails and then figure out how to alter these thumbnails’ images so that it is still controlling the slide transitions, but not actually the thumbnails for the background. In that way, I can then set the accordion slides to those thumbnails instead but have them control both the accordion and the background.

I’m sure I’m being very confusing right now, so if you have any questions, ask away. Thanks.

Answer 1

Lets see if i got your question right,

if you’re looking for a way to change the background image (used by supersized) on clicking on a div or something, then there are many ways to do it.

The following code may help you out, it will replace the active slide image name with a ‘-bw’ in the end of it.

for example : clicking on a div with a class name ‘click-me’ will change the background image from ‘image.jpg’ to ‘image-bw.jpg’

function changeBg() {
  var $supersizedImg = $("#supersized .activeslide img"),
      imgSrc = $supersizedImg.attr('src');
  imgSrcArray = imgSrc.split('/'); //split the image source by '/'
  fullFileName = imgSrcArray[imgSrcArray.length - 1]; //get the file name
  fileName = fullFileName.split('.'); //split that file name by '.'
  fileName[0] = fileName[0] + '-bw'; //grab the first array element(which is filename without extension and add a '-bw' in the end)
  fileName = fileName.join('.'); //join the new file name with its extension with a '.'
  imgSrcArray[imgSrcArray.length - 1] = fileName; //add the new file name the the last element of imgSrcArray. 
  imgSrcArray = imgSrcArray.join('/'); //join the whole url by '/'
  $supersizedImg.attr('src', imgSrcArray); //add the new url to the img src of supersized
}

$('.click-me').on('click', changeBg); //call changeBg function when a div is clicked

hope it helps.