SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: function to add style on event
-
Sep 3, 2008, 17:05 #1
- Join Date
- Aug 2008
- Posts
- 23
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
function to add style on event
Hi,
I need to create a function that applies a style to an image on a certain event.
Background: I am customising a javascript slideshow script which automatically transitions betweeen a number of images. There is also the option to navigate to specific images using numbered icons. I would like to add a style to highlight the numbered icon of the current image. (eg. user clicks icon "4" and image 4 is displayed in the slideshow. icon "4" is then highlighted).
I have located the code which controls the current image state in the slideshow but I'm a bit lost how to create a new function to apply an style to the numbered icons.
Code JavaScript:constructElements: function() { el = this.galleryElement; this.maxIter = this.galleryData.length; var currentImg; for(i=0;i<this.galleryData.length;i++) { var currentImg = new Fx.Styles( new Element('div').addClass('slideElement').setStyles({ 'position':'absolute', 'left':'0px', 'right':'0px', 'margin':'0px', 'padding':'0px', 'backgroundPosition':"center center", 'opacity':'0' }).injectInside(el), 'opacity', {duration: this.options.fadeDuration} ); if (this.options.preloader) { currentImg.source = this.galleryData[i].image; currentImg.loaded = false; currentImg.load = function(imageStyle) { if (!imageStyle.loaded) { new Asset.image(imageStyle.source, { 'onload' : function(img){ img.element.setStyle( 'backgroundImage', "url('" + img.source + "')") img.loaded = true; }.bind(this, imageStyle) }); } }.pass(currentImg, this); } else { currentImg.element.setStyle('backgroundImage', "url('" + this.galleryData[i].image + "')"); } this.galleryElements[parseInt(i)] = currentImg; } },
I attempted to add a function myself but only managed to break the slideshow completely.
Code for slideshow:
Code HTML4Strict:<!-- Slideshow test --> <div id="myGallery"> <div class="imageElement"><!-- Slideshow image 1 --> <a href="#" title="click for more information" class="open"></a> <img src="slide/image1.jpg" width="520" class="full" /> </div> <div class="imageElement"><!-- Slideshow image 2 --> <a href="#" title="click for more information" class="open"></a> <img src="slide/image2.jpg" width="520" class="full" /> </div> <div class="imageElement"><!-- Slideshow image 3 --> <a href="#" title="click for more information" class="open"></a> <img src="slide/image3.jpg" width="520" class="full" /> </div> <div class="InfoBar"> <!-- Want these to highlight when corresponding image is active --> <a href="javascript:myGallery.goTo(0);"><img src="/slide/btn_1a.gif" width="16" height="16" border="0"></a> <!-- numbered icon "1" --> <a href="javascript:myGallery.goTo(1);"><img src="/slide/btn_2a.gif" alt="" width="16" height="16" border="0"></a> <!-- numbered icon "2" --> <a href="javascript:myGallery.goTo(2);"><img src="/slide/btn_3a.gif" width="16" height="16" border="0"></a> <!-- numbered icon "3" --> </div> </div> <script type="text/javascript"> var myGallery; var isPaused = 0; function startGallery() { myGallery = new gallery($('myGallery'), { timed: true, delay: 3000, showCarousel: false, showArrows: false, showInfopane: false }); } window.onDomReady(startGallery); </script>
I know this is a bit of an ask, but I'm sure this is pretty simple for anyone with more Javscript knowledge then me.
Any help will be gretaly appreciated
-
Sep 3, 2008, 23:00 #2
- Join Date
- Aug 2008
- Posts
- 23
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Now that I've spent some time reading and fiddling, I realise that my original post was over-complicated.
Could someone please point me in the right direction on how to change an image onclick - and have it change back when something else is clicked.
thanks
Bookmarks