SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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

  2. #2
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •