DD PHP Photo Album (using Slimbox2) on Mobile

So we are using the following DD PHP Photo Album:

http://www.dynamicdrive.com/dynamici...photoalbum.htm

with Slimbox2 using the following instructions:

http://www.dynamicdrive.com/forums/s...nside-Lightbox

Works fantastic, as it should, on desktop! But on mobile devices, it breaks all jquery/styling of the site and displays incorrectly.

To see the demo installed:

http://www.silverhorseracing.com/94-04-mustang-customers/

And on mobile site you can visit the same URL, it will recognize you are on mobile/tablet.

Is there a way to at least get the script to work correctly?

Nope - not loading for me on iPhone 5S (wifi)

I waiting around 10 seconds and all I see is the squirly loading thing in the middle of the screen.

Try reducing the weight of the page by optimising your images (if you haven't already) or reducing the number so that the page loads more quickly.

As an alternative script, you might be interested in this PHP generated responsive gallery with modal image viewer - version 5 in this blog post http://www.dynamicdrive.com/forums/e...-(PHP-CSS3-JS)

UPDATE:

Figured out some of the problem! My mobile site loads its own jquery-min.js file, and in the custom HTML I did for the photo album, I included another jquery-min.js, this caused an error.

Removed that and now the album shows correctly to me, but clicking images does not work yet [slimbox 2 isn't activating on click]

Slimbox 2 specifically excludes mobile devices because (as far as I can tell) at least some, if not all of its features do not work well on mobiles. Now, the code in the thread that you linked to removes this explicit exclusion, but makes no attempt at making Slimbox 2 work with touch events.

A tap (which is really a touchstart followed quickly by a touchend with the target elements being the same - no dragging off of the start element before the touchend occurs) is often interpreted the same as a click on mobiles, but not always.

There are lightbox type scripts that work with mobiles. It would perhaps be easiest to use one of these instead of Slimbox 2. Butif you want to stick with Slimbox 2 it might be able to be adapted. The first step though would be to see if it works on a non-mobile (a desktop or laptop). Just tried that and it works. So to see if we can get things started on mobile (more work will need to be done, but this is a test to see if it can happen at all) change in the ddphpalbum.js file:

Code:

---

phpimagealbum.prototype={

        buildgallery:function(){
                var thisalbum=this
                var curimage=0
                document.write('<div id="'+this.albumdivid+'">')
                for (var rows=0; rows<this.dimensions[1]; rows++){
                        for (var cols=0; cols<this.dimensions[0]; cols++){
                                if (curimage<this.albumvar.images.length)
                                        document.write('<div class="photodiv">' + phpimagealbum.routines.buildimage(this.albumvar, curimage, this.autodesc, this.showsourceorder) + '</div>')
                                curimage++
                        } //end cols loop
                        document.write('<br style="clear: left" />')
                } //end rows loop
                document.write('</div>')
                var albumdiv=document.getElementById(this.albumdivid)
                var alldivs=albumdiv.getElementsByTagName('div')
                for (var i=0; i<alldivs.length; i++){
                        if (alldivs[i].className=="photodiv")
                                this.photodivs.push(alldivs[i])
                }
                phpimagealbum.routines.addEvent(albumdiv, function(e){
                        var e=window.event || e
                        var target=e.srcElement || e.target
                        if (target.tagName=="IMG" && target.getAttribute('data-index')){
                                thisalbum.onphotoclick(target, thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][0], thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][1])
                        }
                }, "click")
        },

---

to:

Code:

---

phpimagealbum.prototype={

        buildgallery:function(){
                var thisalbum=this
                var curimage=0
                document.write('<div id="'+this.albumdivid+'">')
                for (var rows=0; rows<this.dimensions[1]; rows++){
                        for (var cols=0; cols<this.dimensions[0]; cols++){
                                if (curimage<this.albumvar.images.length)
                                        document.write('<div class="photodiv">' + phpimagealbum.routines.buildimage(this.albumvar, curimage, this.autodesc, this.showsourceorder) + '</div>')
                                curimage++
                        } //end cols loop
                        document.write('<br style="clear: left" />')
                } //end rows loop
                document.write('</div>')
                var albumdiv=document.getElementById(this.albumdivid)
                var alldivs=albumdiv.getElementsByTagName('div')
                for (var i=0; i<alldivs.length; i++){
                        if (alldivs[i].className=="photodiv")
                                this.photodivs.push(alldivs[i])
                }
                phpimagealbum.routines.addEvent(albumdiv, function(e){
                        var e=window.event || e
                        var target=e.srcElement || e.target
                        if (target.tagName=="IMG" && target.getAttribute('data-index')){
                                thisalbum.onphotoclick(target, thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][0], thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][1])
                        }
                }, "click");
                phpimagealbum.routines.addEvent(albumdiv, function(e){
                        var e=window.event || e
                        var target=e.srcElement || e.target
                        if (target.tagName=="IMG" && target.getAttribute('data-index')){
                                thisalbum.onphotoclick(target, thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][0], thisalbum.albumvar.images[parseInt(target.getAttribute('data-index'))][1])
                        }
                }, "touchstart");
        },

---

John,

I have implemented the suggested code and don't see any changes on my phone.

Can you verify if you see any changes or not? Mine might be cached (though I cleared cache and tried again).

Nope, I have no mobile to test on, hopefully Beverley or someone can check. I can verify that you made the change, and that the page/browser may need to be refreshed/have its cache cleared.

No joy here

I guess there's a reason then why Slimbox 2 excludes mobiles by default. But I also happen to know that refreshing the page and its resources is sometimes difficult on a mobile. Beverley, were you able to clear the cache and refresh the page before testing?

I tried on multiple devices, no luck :(

Yes, cache cleared here John (I tried a few browsers and got zilch!)