1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Help with JS

Discussion in 'Web Design & Development' started by SNewman, Sep 21, 2011.

Thread Status:
Not open for further replies.
  1. SNewman

    SNewman Thread Starter

    Joined:
    Feb 26, 2006
    Messages:
    82
    Hey all

    I am using Agile Carousel, a jQuery carousel plugin. Basically I have a website with a video player (JWPlayer) that plays videos selected by the user. To add the ability to link to a specific video, I've made use of a history plugin. When they load a specific video by URL, it selects the video properly but what I need to do is scroll to it as well (by default, only videos 1 - 3 will show...if they click a link to view video 7, video 7 should show).

    The website is http://www.photographybysw.com/dev/lhuiis/

    The javascript is:

    Code:
    var vids = [
    
                  [ "Student 1", { image: 'media/player/previews/preview.jpg', file: 'media/player/videos/video.mp4' } ],
                  [ "Student 2", { image: 'preview1.jpg', file: 'video1.mp4' } ],
                  [ "Student 3", { image: 'preview1.jpg', file: 'video1.mp4' } ],
                  [ "Student 4", { image: 'preview1.jpg', file: 'video1.mp4' } ],
                  [ "Student 5", { image: 'preview5.jpg', file: 'video5.mp4' } ],
                  [ "Student 6", { image: 'preview5.jpg', file: 'video6.mp4' } ],
                  [ "Student 7", { image: 'preview7.jpg', file: 'video7.mp4' } ]
    
    ];
    
    var visiblePageNum = 1;
    var pageNum;
    
    function loadVid(v) {
    
       var numSlides = $(".slides > div").size();
       for(var x = 1; x < (numSlides+1); x++)
       {
       
          if(x == v) {
          
             $(".slide_" + x + " > div").attr("class", "slide_inner_selected");
             var xfactor = Math.ceil(v / 3);
    
             if(pageNum !== visiblePageNum) {
             
                var prevNext = "";
                if(visiblePageNum > pageNum) { prevNext = ".previous_button"; } else { prevNext = ".next_button"; }
                for(var y = 0; y < (Math.abs(pageNum - visiblePageNum) + 1); y++) {
                   
                   $(prevNext).click();
                   if(visiblePageNum > pageNum) { visiblePageNum--; } else { visiblePageNum++; }
                   
                }
                
             }    
             
          } else {
          
             $(".slide_" + x + " > div").attr("class", "slide_inner");
             
          }
          
       }
       
       jwplayer("mediaplayer").load(vids[v-1][1]);
    
    }
    
    function pausecomp(ms) {
    
       ms += new Date().getTime();
       while (new Date() < ms){}
    
    } 
    
    String.prototype.capitalize = function(){ //v1.0
    
       return this.replace(/\w+/g, function(a){
        
          return a.charAt(0).toUpperCase() + a.substr(1).toLowerCase();
            
       });
        
    };
    
    Array.prototype.findIndexByCol = function(value,cIdx) {
    
       var ctr = "";
       for (var i=0; i < this.length; i++) {
    
          if (this[i][cIdx] == value) {
    
             return i;
    
          }
    
       }
    
       return ctr;
    
    };
    
    function hash2vid(h) {
    
       var name = "";
       var new_name = "";
       
       name = h.split("-");
       for(var x = 0; x < name.length; x++) {
       
          new_name += name[x].capitalize();
          if(x + 1 < name.length) {
          
             new_name += " ";
             
          }
          
       }
       
       return new_name;
        
    }
    
    function name2hash(n) {
    
       var name = "";
       name = n.replace(" ", "-").toLowerCase();
       return name;
       
    }
       
    
    $(function() {
    
       $('a[rel*=external]').click( function() {
       
          window.open(this.href);
          return false;
          
       });
       
    }); 
    
    // initalize components
    $(document).ready(function() {
    
       $('#slider').nivoSlider({
       
          controlNav: false,
          pauseTime: 6000
          
       });
    
       $.getJSON("media/carousel/data.json", function(data) {
                        
          $(document).ready(function(){
                
             $("#multiple_slides_visible").agile_carousel({
                    
                carousel_data: data,
                carousel_outer_height: 230,
                carousel_height: 200,
                slide_height: 200,
                carousel_outer_width: 480,
                slide_width: 160,
                number_slides_visible: 3,
                transition_time: 330,
                control_set_1: "previous_button,next_button",
                control_set_2: "group_numbered_buttons",
                persistent_content: "<p class='persistent_content'>Video Testimonials<\/p>",
                current_slide_number: 7      
                
             });
             
             $.history.init(function(url) {
       
                var stuName = hash2vid(url == "" ? name2hash(vids[0][0]) : url);
                var vidIndex = vids.findIndexByCol(stuName, 0);
                pageNum = Math.ceil((vidIndex + 1) / 3);
                loadVid(vidIndex+1);
                
             });
            
          });
        
       });       
             
       jwplayer("mediaplayer").setup({
    	  
          flashplayer: 'media/player/player.swf',
          skin: 'media/player/skins/glow.zip', 
          width: '405',
          plugins: {
          
             'sharing-3': {}
             
          }
    	       
       });
       
       $('#slides a').live('click', function(e) {
    
          var url = $(this).attr('href');
          url = url.replace(/^.*#/, '');
          $.history.load(url);
          return false;
    
       });
       
    });
    Basically, as youll see in the loadVid I am trying to click the appropriate next/previous button as generated by Agile Carousel. But as you'll see by visiting http://www.photographybysw.com/dev/lhuiis/#student-7, it only shows videos 4-6, not 7. Thank you for any help!
     
  2. SNewman

    SNewman Thread Starter

    Joined:
    Feb 26, 2006
    Messages:
    82
    Anyone have any ideas?
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1018784

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice