Develop Reference

Making an image change from one to the next in 2 seperate divs

I am trying to create two divs with a rotating image in on my webpage, these change to another image after a certain amount of seconds and there are 3 images to display. At the moment I am just trying to get the mechanics of this working using the code below, but although its simple I can not get it working. the code is the same as what I have used before however this time it does not want to work. I did it last, years agao, and I have completely forgotten how and research has not helped.
My code is below. In case this problem is site specific I have also included a livelink HERE which I shall remove once the question is answered. THE TWO DIVS ARE THE RED AND YELLOW BOXES.
JAVASCRIPT
var rotators = [
{ id: 'advert1', images: ['http://www.w3schools.com/html/html5.gif', 'http://www.w3schools.com/html/pic_mountain.jpg', 'http://www.w3schools.com/html/pic_graph.png'], selectedIndex: 0 },
{ id: 'advert2', images: ['http://www.w3schools.com/css/klematis_big.jpg', 'http://www.w3schools.com/css/klematis2_big.jpg', 'http://www.w3schools.com/css/klematis3_big.jpg'], selectedIndex: 0 }
];
var updateImages = function() {
for (var i=0; i < rotators.length; i++) {
var rotator = rotators[i];
rotator.selectedIndex++;
if (rotator.selectedIndex >= rotator.images.length) {
rotator.selectedIndex = 0;
}
document.getElementById(rotator.id).src = rotator.images[rotator.selectedIndex];
}
};
var timer = setInterval(updateImages, 1000);
</script>
HTML
<div id="main">
<div id="advert1"></div>
<div id="advert2"></div>
</div>

You are trying to set the div src. you need to have an image (img) element inside each div and then to set the image src.
<div id="main">
<div>
<img id="advert1" alt="" src.../>
</div>
<div>
<img id="advert2" alt="" src.../>
</div>
</div>
Another option will be to set the div background image using the style property or class property (both using CSS sets with JavaScript).

The javascript is executed where you write, if you write before element then the element does not exist.
You can attach code to onReady event of document or puts code after element.

Looking at your code in Google Chrome, I see the following error in the console :
Uncaught ReferenceError: $ is not defined | new.html:204
It seems like you forgot to include the jQuery in your html page.
You can get it from a CDN on the following page: http://code.jquery.com/
Another problem is that you're trying to update an img but your DOM element is a div.
You should replace the following code:
<div id="main">
<div id="advert1"></div>
<div id="advert2"></div>
</div>
With:
<div id="main">
<img src="" id="advert1" />
<img src="" id="advert2" />
</div>

Create an array in jQuery to advance through image gallery

So, I've created this website that has an image gallery using some aspects of Superbox, but my client would now like to be able to advance through the gallery rather than merely clicking on the images one by one.
<div class="superbox">
<div class="superbox-list">
<img src="photos/wedding-001s.jpg" data-img="photos/wedding-001.jpg" alt="" class="superbox-img">
</div>
<div class="superbox-list">
<img src="photos/commercial-002s.jpg" data-img="photos/commercial-002.jpg" alt="" class="superbox-img">
</div>
<div class="superbox-list">
<img src="photos/travel-027s.jpg" data-img="photos/travel-027.jpg" alt="" class="superbox-img">
</div>
</div>
Is there really a practical way for me to make this work, or should I just rebuild the gallery? Is there any way I can build an array that allows advancement with my existing layout?

It doesn't look like that plugin has the ability to give an array of images.
What you could do however is trigger the click function.
So lets say you have two buttons: #previous and #next you could do something like:
$('#previous, #next').click(function(e){
// If there is not yet an image 'superboxed'
// trigger the first image.
if($('.superbox-show').length == 0){
$('.superbox-list:eq(0)').trigger('click');
return;
}
// Select the next option
if($(e.target).attr('id') == 'next'){
$('.superbox-show').next().trigger('click');
} else {
// Select the previous option
$('.superbox-show').next().trigger('click');
}
});
You have to tweak it a little bit so that it will fulfill your needs but this is a basic idea of what you could do.

setting content of element with jquery via text() duplicates the text

I have a one page site that displays a portfolio. Basically it consists of a a list of images that are displayed as a slideshow with sudoslider
Once a new slideshow (an image in this case) is loaded, the description of the image should be updated.
For some reason or another, the description is displayed twice, as you can see at this version which is created via wordpress. The weird thing is that I have a static version of this website that does not seem to produce this problem, while the html/javascript/css structure is exactly the same (as far as I am not overlooking something).
Relevant pieces of code:
html-list:
<section id="portfolio">
<ul id="portfolio-ontwerpen" class="noscript">
<li>
<figure><img width="800" height="569" src="http://haendehoch.nl/wp/wp-content/uploads/2013/01/klinch1.jpg" class="attachment-large wp-post-image" alt="klinch1" /></figure>
<figcaption>Klinch poster</figcaption>
</li>
<li>
<figure><img width="800" height="565" src="http://haendehoch.nl/wp/wp-content/uploads/2013/01/hh_grid.jpg" class="attachment-large wp-post-image" alt="hh_grid" /></figure>
<figcaption>Grid</figcaption>
</li>
</ul>
</section>
javascript:
var sudoSlider = $("#portfolio").sudoSlider({
afterAniFunc: $("aside figcaption").text($(this).find('figcaption').text()); },
});
$(this) in this case refers to the current slideshow (the current list-item)
sudoslider description of the afterAniFunc (basically a function that is executed after the next slide animation has been finished)
afterAniFunc:false. Same as beforeAniFunc. It's just runs after the animation (still any animation) has finished. beforeAniFunc does not execute multiple times if you use fade, but can still execute multiple times if you use continuous.

I'm not sure exactly how/why it's happening, but you seem to be selecting multiple elements with the statement:
$(this).find('figcaption').text()
Selecting only the first element is providing the correct result for me:
$(this).find('figcaption').first().text()

CSS/Javascript Lightbox

First I'll start with this: I am in no way shape or form a developer, coder etc etc. I'm just a graphic designer helping a friend with her website.
As of right now, I'm having issues linking up thumbnails to the full images on my lightbox call out - you can view the site at www.chrissybulakites.com
I noticed
With VOID:(0) being in every single one ... my thought process was that if I correspond 0 thumb with 0 full then 1 thumb with 1 full then 2 thumb wwith 2 full etc etc it would work .. it didn't.
Can somebody explain to me if I'm on the right path or what I can do to make this work.
Thanks
Rob

Have have two basic elements per image; the thumb and the full image. The thumb is using JavaScript to show and hide a div (kind of like a frame) to hold the full image.
The HTML on the page repeats itself a lot, you can probably solve your problem whilst removing some of the repetition. I'd keep all of your thumbs but on each one, add in a reference to the full image the thumb represents. As well as reducing repetition, it'll make it easier to update the page in the future as changing a thumb and main image is done in one place rather than two.
In the below I've added another part to the "onclick" to say update the src of 'frame' to be the full version of the thumb.
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
Then delete all of the large images except one, updating it so that the img tag has an ID of 'frame'
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
This will mean that as each thumb is clicked, it will do the light and fad bits it did before but it will also update the image being displayed.
Doing this for two images as a proof of concept I get this which works as expected:
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
<img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" />
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>

you need to give each full image div its own unique id like: id="image23". Then modify the onclick to refrence the corresponding id: onclick="document.getElementById('image23')...

The meaning of the function void() in JavaScript is "do nothing". This prevents it to load a new new page (or to open the thumbnail image).
onclick = "document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block' "
Says that when user clicks that item it will capture the element light and change the display to block it will also capture the element fade and change the display to block. The thing is all your images are wrapped in an element called "light" so the browser is opting to show the first one (instead of throwing an error).
There is plenty of fuzzy logic here.
Starting with the fact that you are loading all images (the high definition ones).
If you want my two cents (and you only want to get the results, as opposed to learn how JavaScript works) I would go with something like prettyPhoto that does it out of the box, in an easy and straightforward way and is well documented.
How to add prettyPhoto to your page?
Download the code and include both the Javascript and the CSS file's on your header.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Then put this code on your page
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
The docs say to put it on the bottom of the page but you (should) also put it on the header.
And then put the thumbnails with links to the actual images. PrettyPhoto will take care of everything else. Do note the rel="prettyPhoto[my_gal]"
<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
You can customize it further and should really read the manual here.

How to use the jquery.rotate and jquery.cycle plugins together

I have a series of photos (3 series actually) that need to cycle, which the jQuery cycle plugin does nicely for me.
My problem is I also want to rotate them (rotate as in turn) by a few degrees each in varying directions on page load, to achieve a 'scattered' look. jQuery Rotate does this nicely too ... my problem is I can't get both rotate and cycle to happen on the same page.
It looks as if the solution is going to involve rotating the images within the cycle code itself, but that is beyond my limited capability (at least in the time available). Has anyone else tried this? Got any pointers?
If all else fails, I can pre-rotate the images in photoshop but that's not ideal--the js rotate would mean the photos can be easily refreshed by the site's owner simply dumping new ones in a directory. Photoshop otoh would mean rotating each one -and- converting them from jpg to a format that supports transparency (or even worse, duplicating the appropriate background colours etc in the right places).
I'm using standard jquery.cycle... html pre-loads 1st 3 images like this:
<div id="slideshow" class="pics">
<img class="rotate" src="images/image1.jpg" width="100" height="100" />
<img class="rotate" src="images/image2.jpg" width="100" height="100" />
<img class="rotate" src="images/image3.jpg" width="100" height="100" />
</div>
And I have the usual js that kicks off the cycle:
$(document).ready(function() {
var stack = [];
var imagesPath = '../images/image';
if(window.location.href.indexOf('\/html\/') == -1)
imagesPath = 'images/image';
for (var i = 0; i < 8; i++) {
var img = new Image(100,100);
img.src = imagesPath + i + '.jpg';
$(img).bind('load', function() {
stack.push(this);
});
}
// start slideshow
$('#slideshow').cycle({
timeout: 600,
before: onBefore ,
speed: 2000
});
// add images to slideshow
function onBefore(curr, next, opts) {
if (opts.addSlide) // <-- important!
while(stack.length)
opts.addSlide(stack.pop());
};
});
The js to rotate the first of these images with jQuery.rotate is:
$('.rotate')[0].rotateLeft(5);
The above works if I disable cycling, but nothing happens when cycling is on.
Removing the array reference per the following rotates the visible image, removes it from the slideshow, and leaves it on the page.
$('.rotate').rotateLeft(5);
Perhaps the ideal would be to rotate the containing div instead, but jquery.rotate uses canvas and so only works on images. Let me know if there's any more info I can provide. And thanks for your interest!

JQuery Cycle adds a lot of CSS to the immediate child images of a container in order to turn them into slides. If you want to scatter images on a slide, you should wrap the contents of each slide in a tag. Then tell JQuery cycle that those elements are, in fact, slides by using the slideExpr option.
Html
<div id="slideshow">
<div class="slide">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
<div class="slide">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>
Javascript
$('#slideshow').cycle({
slideExpr: '.slide',
timeout: 600
});
This will allow Jquery cycle to apply it's styles to the wrappers, and JQuery rotate to apply rotations to the contents inside each slide without stepping on each others' toes.
Here's the complete list of JQuery Cycle options.

try using the CSS3 transform selector:
-webkit-transform: rotate(-15deg);
$('.rotate').css({'-webkit-transform' : 'rotate(-5deg)' });