WordPress.org

Ready to get started?Download WordPress

Forums

jQuery Colorbox
[resolved] I want to thank you for your plugin and... (1 post)

  1. a_ahmed
    Member
    Posted 1 year ago #

    I kept pulling my hair with all sorts of issues since getting jquery fancybox into my site...I wanted the site to look 'nicer' but it screwed me over big time... tired a few different methods and ya... went with easy fancybox... which worked then i realized it doesn't work on mobiles... some hair pulling later i figured out a script and method to disable the content on mobiles and display an alternative then it stopped working in chrome..I then disabled it in chrome too..

    Then late night searching led me to colorbox and I settled with your plugin! Works in all browsers and all i do is add colorbox-link cboxelement class to my link and voila! I don't want automation on everything.

    Unfortunately it didn't work on my samsung galaxy s3... so i will still do my mobile disable method. It very very slowly opened a white box (SLOOOWLY) and displayed nothing so... no go for mobiles i would sya...

    Also if it auto image class insertion is enabled my mobile hide method did not work... it seemed to apply the class to the div...

    My method to disable mobiles? In header add:

    <?php
    $useragent=$_SERVER['HTTP_USER_AGENT'];
    if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
        echo '<style typ="text/css">
    	#desktoponly{display:none;}
    	#mobileonly{display:block;}
    	</style>';
    	else {
    	echo '<style typ="text/css">
    #desktoponly {display: block;}
    #mobileonly{display:none;}
    	</style>';};
    ?>

    Then in the code do:

    <div id="desktoponly" align="center"><a class="colorbox-link cboxElement" href="http://www.youtube.com/v/pbK2VtL02J8&autoplay=1"><img id="fancyboxstyle" alt="" src="http://muslimbodybuilding.com/wp-content/uploads/ss-whatnotgymv4-tv.jpg" width="250" height="136" /></a><a class="colorbox-link cboxElement" href="http://www.youtube.com/v/riyrtpEun9A&autoplay=1"><img id="fancyboxstyle" alt="" src="http://muslimbodybuilding.com/wp-content/uploads/ss-whatnotgymv5-tv.jpg" width="250" height="136" /></a></div>
    <div id="mobileonly" align="center"><iframe src="http://www.youtube.com/embed/pbK2VtL02J8?wmode=transparent" height="315" width="560" allowfullscreen="" frameborder="0"></iframe><iframe src="http://www.youtube.com/embed/riyrtpEun9A?wmode=transparent" height="315" width="560" allowfullscreen="" frameborder="0"></iframe></div>

    Thanks for your plugin again and I hope the above helps someone in more ways than one since the @media and min/max width/height BS css method no longer works as some mobiles and tablets have HD resolution... the php detection code is courtesy of: http://detectmobilebrowsers.com/

    http://wordpress.org/extend/plugins/jquery-colorbox/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.