Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    script breaks when adding more than 2 image links

    Hello: I'm using a slideshow on my site called BarackSlideshow 3.0, a jquery application. I'm using the free demo version.
    What i am trying to do is attach a link to an image when it briefly comes across the screen that directs to the appropriate url. but every time i try to link more than two URL's to the images in the presentation the script breaks. I do not know how to demonstrate the code that is giving me the blues but here is the address where the script is located: http://www.devthought.com/2008/06/11...deshow-script/
    I have successfully managed to change other aspects of the script but this has me stumped. The following is what I tried to modify to link the URL's to the images but it breaks.

    The HTML
    Code:
    <script type="text/javascript" charset="utf-8" src="mootools-1.2.1-core-yc.js"></script>
        <script type="text/javascript" charset="utf-8" src="mootools-1.2.2.2-more.js"></script>    
        <script type="text/javascript" charset="utf-8" src="Fx.MorphList.js"></script>
      <script type="text/javascript" charset="utf-8" src="BarackSlideshow/Source/BarackSlideshow.js"></script>    
      <script type="text/javascript" charset="utf-8" src="demo.js"></script>
      </head>
      <body id="demo">    
        
        <h1>GoGreen Computer Services Partners</h1>
        
        <p>It takes so much to bring about the results we hope to achieve:  sustaining our environment</p>
        <p> by extending the life of our computers just that much longer.</p>
       <div id="slideshow">    
          <span id="loading">Loading</span>
        
          <ul id="pictures">
            <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicessas.jpg" alt="gogreencomputerservicessas" title="gogreencomputerservicessas" /></li>
            <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesbnm.jpg" alt="gogreencomputerservicesbnm" title="gogreencomputerservicesbnm" /></li>
            <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicessbhorizonsnorthpointe.jpg" alt="gogreencomputerservicessbhorizonsnorthpointe" title="gogreencomputerservicessbhorizonsnorthpointe" /></li>
            <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesfinestofsantabarbara.jpg" alt="gogreencomputerservicesfinestofsantabarbara.jpg" title="gogreencomputerservicesfinestofsantabarbara.jpg" /></li>
            <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesprosurferdude.jpg" alt="gogreencomputerservicesprosurferdude" title="gogreencomputerservicesprosurferdude" /></a></li>
            <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicessm3.jpg" alt="gogreencomputerservicessm3" title="gogreencomputerservicessm3" /></li>
            <li><img src="BarackSlideshow/Source/images/cities/gogreencomputerservicesgogreencomputerservices.jpg" alt="gogreencomputerservicesgogreencomputerservices" title="gogreencomputerservicesgogreencomputerservices" /></li>        
          </ul>
          
          <ul id="menu" name="menu">
            <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicessas.jpg">Sewing Another Seed</a></li>
            <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesbnm.jpg">BabiesNMovies</a></li>
            <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicessbhorizonsnorthpointe.jpg">SBHorizons/NorthPointe</a></li>
            <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesfinestofsantabarbara.jpg">Finest of Santa Barbara</a></li>
            <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesprosurferdude.jpg">ProSurferDude</a></li>
            <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicessm3.jpg">Solution:M3</a></li>
            <li><a href="BarackSlideshow/Source/images/cities/gogreencomputerservicesgogreencomputerservices.jpg">GoGreen Computer Services</a></li>
          </ul>
        </div>
    The JS:
    Code:
    var BarackSlideshow = new Class({
      
      Extends: Fx.MorphList,
      
      options: {/*
        onShow: $empty,*/
        auto: false,
        autostart: false,
        autointerval: 2000,
        transition: 'fade',
        tween: { duration: 700 }
      },
      
      initialize: function(menu, images, loader, options){
        this.parent(menu, options);
        this.images = $(images);
        this.imagesitems = this.images.getChildren().fade('hide');
        $(loader).fade('in');
        new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
          this.loaded = true;      
          $(loader).fade('out');
          if (this.current) this.show(this.items.indexOf(this.current));
          else if (this.options.auto && this.options.autostart) this.progress();
        }.bind(this) });
        if ($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
      },
      
      auto: function(){
        if (!this.options.auto) return false;
        $clear(this.autotimer);
        this.autotimer = this.progress.delay(this.options.autointerval, this);
      },
      			
      onClick: function(event, item){
        this.parent(event, item);
        event.stop();
        this.show(this.items.indexOf(item));
        $clear(this.autotimer);
      },
      
      show: function(index) {
        if (!this.loaded) return;
        var image = this.imagesitems[index];    
    		if (image == this.curimage) return;
        image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
    		image.getElement('img').setStyle('display', 'block');
        var trans = this.options.transition.run(null, this).split('-');
        switch(trans[0]){
          case 'slide': 
            var dir = $pick(trans[1], 'left');
            var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
            image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); 
            break;
          case 'fade': image.fade('in'); break;
        }
        image.get('tween').chain(function(){ 
          this.auto();
          this.fireEvent('show', image); 
        }.bind(this));
        this.curimage = image;
        this.setCurrent(this.items[index])
        this.morphTo(this.items[index]);
    		return this;
      },
      
      progress: function(){
        var curindex = this.imagesitems.indexOf(this.curimage);
        this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0);
      }
      
    });
    can anyone help?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    each image can have a link with this script

    http://www.vicsjavascripts.org.uk/Sl...eSlideShow.htm
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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