Ganesh – 2010

September 26, 2010 § Leave a Comment

, originally uploaded by anpsmn.

Check more photos here.

Tejookaya Park – Ganesh 2010

September 26, 2010 § Leave a Comment

, originally uploaded by anpsmn.

Check more photos here.

jquery tools : Scroller issue

August 6, 2010 § Leave a Comment

I was using scrollable plugin of jquery tools for a project.

The issue I was facing was when I make it circular by the following code, I used to have a an empty element right after the last element. This makes a weird transition on the scroller i.e it doesn’t look like it’s circular.

$(document).ready(function(){
 $("#scrollable").scrollable({circular: true});
});

I came up with a quick fix since I didn’t have much time to spend on this.
I copied the second element of the list and appended at the last.
Couldn’t think of anything other than this. If you have a better solution feel free to comment.

$('.items').append('<li>'+$('.items li').eq(2).html()+'</li>')

Switching Between Flowplayer And Youtube video player

December 20, 2009 § 4 Comments

In my current project, I had to play videos on a page. The decision was to play those videos on Flowplayer. The issue was that few videos were hosted on youtube. And I think YouTube does not permit to play youtube videos directly with another player. So the only solution was to have two players [ youtube and flowplayer in this case] and switch between them.

UPDATE: You can see this live here

Requirement: I had few thumbnails [ video snapshots ]  in a gallery which when clicked should load the respective video.

I did the following to get the result.


<div id="video-wrap">

   <div id="video"> </div>

</div>

Created an empty div with id ‘video’ for the player.


  // fgdata --> XML DOM Object

  $('gallery > item', fgData).each(function(){

     var thumbUrl = $('>thumbnail', $(this)).text();

     var videoType = $('>videotype',$(this)).text();

     var videoUrl = $('>videoUrl', $(this)).text()

     // creating thumbnail elements for the gallery

     $('#gallery ul').append('<li>'

       + '<img src="'+ thumbUrl +'" alt=""/>'

       + '<p id="videotype_'+ i +'">'+ videoType +'</p>'

       + '<p id="video_'+ i +'">'+ videoUrl+'</p>'

       + '</li>');

   });

I parse a XML document for the video urls and the thumbnail urls and I get the video type too .


  $('#gallery ul li').children('img:eq(0)').bind('click', function(){

      switchVideos(videoType, videoUrl);
  });

Each thumbnail image is attached a click event.

  var flowplayerobj= null;
  function switchVideos(vType, vUrl){

     // Unload the flowplayer before deleting the element

        if(flowplayerobj != null)
           flowplayerobj.unload();

     // removing the element
        $('#video').text(' ');
        $('#video').remove();
     // Creating the element [ #video ] again after removng it.

        $('#video-wrap').append('<div id="video"></div>');

     var vType = vType;

     var vUrl = vUrl;

     if(vType=='youtube')

     {

         $('video').append('<object width="506" height="335"><param name="wmode" value="transparent"></param><param name="movie" value="'+ vUrl +'"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+ vUrl +'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="506" height="335"></embed></object>');

     }

     else

     {

         insertFlowPlayer(vUrl);

     }

 }

Every time I remove the div containing the video player since I would be switching the players according to the video type.

Note:  If the element contains the flowplayer, it can’t be removed directly. One needs to unload the flowplayer first and then remove the element.

If the video type [vType] is youtube, I embed the youtube player. If not I insert the flowplayer.


  function insertFlowPlayer(url){

    var vUrl = url;

    flowplayerobj = $f("video", {src: '/flash/flowplayer-3.1.5.swf', wmode: 'transparent'}, {

                  // change the default controlbar to tube
                  plugins: {
                             controls: {
                                          url: '/flash/flowplayer.controls-tube-3.1.5.swf',
                                          borderRadius: '0px',
                                          bufferGradient: 'none',
                                          sliderColor: '#c9c9c9',
                                          timeBgColor: '#d5d5d5',
                                          volumeSliderGradient: 'none',
                                          tooltipTextColor: '#000',
                                          buttonOverColor: '#BA1010',
                                          volumeSliderColor: '#aaaaaa',
                                          progressGradient: 'medium',
                                          progressColor: '#BA1010',
                                          bufferColor: '#c78f8e',
                                          backgroundColor: '#e1e1e1',
                                          timeColor: '#000',
                                          sliderGradient: 'none',
                                          buttonColor: '#000',
                                          durationColor: '#000',
                                          tooltipColor: '#d5d5d5',
                                          height: 25,
                                          opacity: 1.0
                                       }
                          },
                  playlist: [
                              {
                                  url: imgSrc, //screenshot url onload of the player
                                  scaling: 'fit'
                              },
                              {
                                  url: vUrl,
                                  autoPlay: false
                              }
                            ],
                  canvas:
                            {
                                  backgroundColor: '#ffffff'
                            }
       });

}

I have customized the flowplayer so that it looks similar to youtube player when switched.

My new twitter background

September 23, 2009 § Leave a Comment

twitter-anpsmn

twitter-anpsmn

Matunga – Ganesh Idols

September 3, 2009 § 3 Comments

Ganesh -The Elephant Headed God, originally uploaded by anpsmn.

Here u go!! These are idols here in matunga. My bro did manage to get few photos. I have posted only one here. You can find more photos here .

Ganesh -The Elephant Headed God

August 30, 2009 § Leave a Comment

Ganesh -The Elephant Headed God, originally uploaded by anpsmn.

The elephant headed god’s 10-day visit at Tejookaya park (that’s where i stay).

Need to thank ma bro Varun for taking these photos. He’s gonna get more photos of all ganesh idols in matunga. Click here for more pics.

Follow

Get every new post delivered to your Inbox.