Image Image Image Image Image

javascript

08

Oct

Mobile Code Updates!

I’ve been renovating the code on my site to make it cleaner, more up to date and most of all, mobile compatible. To make things mobile compatible I had to chuck all my Flash content, which was using the way outdated amfphp anyway which was slooow loading.

I used jQuery to replace the fading slide shows on the index page and the scrolling thumbnails in the main gallery page. The gallery viewing page had already been coded using jQuery so there wasn’t much to do there. Once I finished these changes I moved on to video galleries. I’ve never been happy with my video solutions. I was storing them locally and it’s eating tons of space on my hosting account. I didn’t want to pay for Vimeo and YouTube always annoyed me. But then I found the programming API for YouTube and started playing. I got everything working fine and then realized that the API I was using was with the old Flash player! DUH!!! So I found the new iframe API. It’s a bit more tricky to implement because of the way my gallery system work. I basically load a bunch of div’s that are hidden and then use jQuery to toggle them hidden or visible as users click on the thumbnails. Anyway, I had to be a bit creative because I’m manually inserting the javascript iframes API code on the backend to make the videos load. I basically had to put all the javascript for a whole gallery (all the different divs) into one entry. But it works. And I was able to really sculpt the look-n-feel of the YouTube player thank god… Here is what I ended up using:

//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player1;
var player2;
var player3;
var player4;
var player5;
var player6;
var player7;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '309',
width: '550',
videoId: 'eCgEeZcDZt0',
playerVars: { showinfo: 0, modestbranding: 0, rel: 0, vq: 'hd720' }
});
player2 = new YT.Player('player2', {
height: '309',
width: '550',
videoId: '5QQzaCbLAqE',
playerVars: { showinfo: 0, modestbranding: 0, rel: 0, vq: 'hd720' }
});
player3 = new YT.Player('player3', {
height: '309',
width: '550',
videoId: '6WV0ddCvpkM',
playerVars: { showinfo: 0, modestbranding: 0, rel: 0, vq: 'hd720' }
});
player4 = new YT.Player('player4', {
height: '309',
width: '550',
videoId: 'lYO0PO7wEdk',
playerVars: { showinfo: 0, modestbranding: 0, rel: 0, vq: 'hd720' }
});
player5 = new YT.Player('player5', {
height: '309',
width: '550',
videoId: 'D8LnPwPMKOM',
playerVars: { showinfo: 0, modestbranding: 0, rel: 0, vq: 'hd720' }
});
player6 = new YT.Player('player6', {
height: '309',
width: '550',
videoId: 'n0y3SSrF-Zg',
playerVars: { showinfo: 0, modestbranding: 0, rel: 0, vq: 'hd720' }
});
player7 = new YT.Player('player7', {
height: '309',
width: '550',
videoId: 'PIymw6g5Pdc',
playerVars: { showinfo: 0, modestbranding: 0, rel: 0, vq: 'hd720' }
});
}

I only have the div at the top for the first video. The divs for the other 6 videos are in their individual posts on the backend. That’s the wonky tricky thing I had to do to make it work at this point. I’m really in a stage of testing and then I’ll have to rewrite the backend to adapt to all this, but for now, it works with no reprogramming.

So great, video was now working great on my site and using the iframe API made them mobile compatible! Awesome… But the iframe code somehow conflicted with my lightbox code. So I went out and found a replacement for that…

The last problem was that on the main gallery page, the thumbnails didn’t scroll on mobile devices… And it was the same in the detailed gallery where you actually view images, no thumbnail scrolling. So I just found solutions today!

On the main gallery page I used this in my CSS where I had originally had it hidden:


overflow: scroll;
-webkit-overflow-scrolling: touch;

This solutions came from here.

For the detailed gallery page I use Jscrollpane (based on jQuery) for the scrolling thumbnails. I used this to fix it:

Around line 165 after “if (isScrollable) { ” insert:


// Ipad Iphone
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))||(navigator.userAgent.match(/Android/i))) {
var isTouchScreen = 1;
}else{
var isTouchScreen = 0;
}

$container.bind('touchstart', function(e){
var cpos = dragPosition;
if(isTouchScreen){
e = e.originalEvent.touches[0];
}
var sY = e.pageY;
var sX = e.pageX;

$container.bind('touchmove',function(ev){
if(isTouchScreen){
ev.preventDefault();
ev = ev.originalEvent.touches[0];
}

var top = cpos-(ev.pageY-sY);
positionDrag(top);

});
$container.bind('touchend',function(ev){
$container.unbind('touchmove touchend');
});
});

I found the solution here.

The only remaining Flash element that I think I need to fix is my artist books section. I’m going to translate those page flip books into a javascript based version.

I hope this helps someone on their journey for web programming on the interwebs!

Bon voyage!!!