Google Classic Maps / Panoramio - Easy and Enhanced Photo Viewer - For both Chrome and Firefox

A faster and easier way to explore 80 million images, handy EXIF image data/information, the place where it was taken and latitude/longitude. - Travel around the world, without leaving you secure home.

ของเมื่อวันที่ 17-03-2015 ดู เวอร์ชันล่าสุด

// ==UserScript==
// @name            Google Classic Maps / Panoramio - Easy and Enhanced Photo Viewer - For both Chrome and Firefox
// @description     A faster and easier way to explore 80 million images, handy EXIF image data/information, the place where it was taken and latitude/longitude. - Travel around the world, without leaving you secure home.
// @namespace       GCMP-EEPW-20150306-SDF-MOFM 
// @version         0.45

// @include         https://maps.google.*/maps*
// @match           https://maps.google.se/maps*
// @match           http://static.panoramio.com/photos/*.jpg
// @match           http://www.panoramio.com/map*

// @require         http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

// @grant           GM_getValue
// @grant           GM_setValue
// @grant           GM_deleteValue
// @grant           GM_xmlhttpRequest

// @created         2015-03-06
// @released        2015-00-00
// @updated         2015-00-00
// @history         @version 0.25 - Alpha version: @released - 2015-03-12
// @history         @version 0.45 - Beta version: @released - 2015-03-17

// @compatible		Greasemonkey, Tampermonkey
// @license         GNU GPL v3 (http://www.gnu.org/copyleft/gpl.html) 
// @copyright		2015+, Magnus Fohlström
// ==/UserScript==

/*jshint -W014, -W030, -W082*/
// -W014, laxbreak, Bad line breaking before '+'
// -W030, Expected assignment or funtion call insted saw an expression


(function($){

    //----------------------------------------------------------------------------------------------------------//
    //													Config													//
    //----------------------------------------------------------------------------------------------------------//

    //----------------------------------------------------------------------------------------------------------//
    //												Start Variables												//
    //----------------------------------------------------------------------------------------------------------//

    GM_getValue('startState') === undefined && GM_setValue('startState','Large');

    var locDoc = window.location.href,
        lstate = 3,
        g = window;

    //----------------------------------------------------------------------------------------------------------//
    //													Helpers													//
    //----------------------------------------------------------------------------------------------------------//

    String.prototype.formatString = function(){
        return this.toString()
            .split(/\s+/g).join(' ')
            .split('{').join('{\n\t')
            .split('; ').join(';')
            .split(';').join(';\n\t')
            .split('*/').join('*/\n')
            .split('}').join('}\n');
    };

    String.prototype.inString = function(string){
        return string !== undefined ? string.search(this) !== -1 : false;
    };

    function inURL(search){
        var winLoc = window.location.href;
        return winLoc.search(search) !== -1;
    }

    function l( name, fn, showthis ){
        ( lstate !== 0 && lstate == (showthis || lstate) || lstate == 'all' ) && console.log( name, fn !== undefined ? fn : '' );
    }

    function isEven(value) {
        return ( value % 2 === 0 );
    }

    $.fn.extend({
        exists: function(){
            return this.length === 0 ? 0 : this.length;
        }
    });

    g.ms = 0;
    function timer(ms)
    {
        g.ms = ms;
        setTimeout(function(){ g.ms = 0; },ms);
    }

    //----------------------------------------------------------------------------------------------------------//
    //													The Script												//
    //----------------------------------------------------------------------------------------------------------//

    function fn_BasicNew() {

        $( '<style id="CssBasic"></style>' ).appendTo('head');

        var CssBasic =
            'img[src*="/photos/small/"] {'
                +		'cursor: pointer !important;'
                +		'}'
                +	'img[src*="/photos/small/"]:hover:after {'
                +		"content: 'Enter enhanced view';"
                +		'position: absolute;'
                +		'padding: 5px;'
                +		'border: 1px solid gray;'
                +		'background: whitesmoke;'
                +		'font-size: 14px;'
                +		'z-index: 65000;'
                +		'}'

                +	'.largePanorama {'
                +		'position: absolute;'
                +		'top: 50%;'
                +		'left: 50%;'
                +		'transform: translate(-50%,-50%);'
                +		'z-index: 10000;'
                +		'border-radius: 15px;'
                +		'padding: 0px 6px 20px;'
                +		'border-width: 3px;'
                +		'border-style: outset;'
                +		'border-color: rgba(127, 127, 127, 0.31);'
                +		'background-color: rgba(236, 236, 236, 0.85);'
                +		'box-shadow: 5px 5px 20px 10px rgba(0, 33, 32, 0.31);'
                +		'}'
                +	'.largePanorama > img.theImg {'
                +		'border-width: 3px;'
                +		'border-style: inset;'
                +		'border-color: rgba(255, 255, 255, 0.6);'
                +		'background-color: rgba(144, 144, 144, 0.65);'
                +		'box-shadow: 4px 2px 20px 1px rgba(170, 170, 170, 0.85);'
                +		'transform: rotate(0deg);'
                +		'}'
                +	'.largePanorama a {'
                +		'color: #15c;'
                +		'}'

                +	'.largePanorama .zoom, .largePanorama .close, .largePanorama .Size, .largePanorama .TheTitle, '
                +	'.largePanorama .pano, .largePanorama .more, .largePanorama #rotate span {'
                +		'cursor: pointer;'
                +		'}'

                +	'.largePanorama .TheTitle {'
                +		'padding: 17px 4px;'
                +		'z-index: 35000;'
                +		'min-width: calc(100% - 4px) !important;'
                +		'max-width: calc(100% - 4px) !important;'
                +		'}'
                +	'.largePanorama .TheTitle b {'
                +		'float: left;'
                +		'cursor: initial;'
                +		'max-width: calc(100% - 80px) !important;'
                +		'margin-top: -7px;'
                +		'}'

                +	'.largePanorama .more {'
                +		'float: right;'
                +		'z-index: 20000;'
                +		'}'
                +	'.largePanorama .more ul {'
                +		'display: none;'
                +		'position: absolute;'
                +		'padding: 4px 4px 4px 3px;'
                +		'margin-top: -14px;'
                +		'margin-left: -24px;'
                +		'border-style: outset;'
                +		'border-width: 2px;'
                +		'border-radius: 8px;'
                +		'border-color: rgb(209, 209, 209);'
                +		'background-color: rgba(215, 215, 215, 0.85);'
                +		'box-shadow: 1px 2px 8px 3px rgba(0, 60, 62, 0.27);'
                +		'z-index: 20000;'
                +		'}'
                +	'.largePanorama .more ul li {'
                +		'border-radius: 4px;'
                +		'line-height: 35px;'
                +		'padding: 0 10px;'
                +		'}'
                +	'.largePanorama .more ul li:hover {'
                +		'background-color: rgb(104, 122, 138);'
                +		'}'
                +	'.largePanorama .more ul li a {'
                +		'color: rgb(0, 36, 47);'
                +		'text-decoration: none;'
                +		'white-space: nowrap;'
                +		'}'
                +	'.largePanorama .more ul li:hover a {'
                +		'color: aliceblue;'
                +		'}'
                +	'.largePanorama .moreArrow.skiptranslate {'
                +		'font-size: 20px;'
                +		'height: 35px;'
                +		'right: 0;'
                +		'padding: 0 5px;'
                +		'margin-top: -19px;'
                +		'line-height: 40px;'
                +		'position: absolute;'
                +		'float: right;'
                +		'}'
                +	'.largePanorama .moreArrow.skiptranslate:hover {'
                +		'color: blue !important;'
                +		'}'

                +	'.largePanorama .Size {'
                +		'position: absolute;'
                +		'z-index: 1000;'
                +		'bottom: 4px;'
                +		'left: 50%;'
                +		'transform: translate(-50%);'
                +		'white-space: nowrap;'
                +		'}'
                +	'.largePanorama .Size span {'
                +		'padding: 0 8px;'
                +		'}'
                +	'.largePanorama .Size span:hover {'
                +		'box-shadow: 0px -1px 18px 6px rgba(229, 229, 229, 1);'
                +		'background-color: rgba(229, 229, 229, 1);'
                +		'}'
                +	'.largePanorama .Size a {'
                +		'color: black;'
                +		'position: relative;'
                +		'text-decoration: none;'
                +		'}'

                +	'.largePanorama .pano {'
                +		'position: absolute;'
                +		'bottom: -3px;'
                +		'width: calc(100% - 16px);'
                +		'padding: 7px 0px;'
                +		'margin-left: 0px;'
                +		'}'

                +	'.largePanorama #rotate {'
                +		'position: relative;'
                +		'margin-right: 25px;'
                +		'width: 50px;'
                +		'top: -10px;'
                +		'float: right;'
                +		'z-index: 4000;'
                +		'}'
                +	'.largePanorama #rotate span {'
                +		'position: absolute;'
                +		'font-size: 20px;'
                +		'z-index: 45000;'
                +		'}'
                +	'.largePanorama #rotate span:hover {'
                +		'color: blue;'
                +		'}'

                +	'.largePanorama span.rotateLeft.skiptranslate {'
                +		'-webkit-transform: rotate(90deg);'
                +		'transform: rotate(90deg);'
                +		'right: 30px;'
                +		'}'
                +	'.largePanorama span.rotateRight.skiptranslate {'
                +		'-webkit-transform: rotate(270deg);'
                +		'transform: rotate(270deg);'
                +		'right: 0px;'
                +		'}'

                +	'.largePanorama #imageDetails {'
                +		'position: absolute;'
                +		'display: none;'
                +		'top: 50%;'
                +		'left: 50%;'
                +		'transform: translate(-50%,-50%);'
                +		'z-index: 30000;'
                +		'}'

                +	'.largePanorama .interim-info-card {'
                +		'padding: 15px;'
                +		'margin: 0 0 13px;'
                +		'background-color: rgba(255, 255, 255, 0.85);'
                +		'border-radius: 15px;'
                +		'border-color: rgba(123, 123, 123, 0.85);'
                +		'border-width: 3px;'
                +		'border-style: outset;'
                +		'box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.4);'
                +		'}'
                +	'.largePanorama .justImg {'
                +		'display: inline-block;'
                +		'width: 100%;'
                +		'margin-left: 0px;'
                +		'}'
                +	'.largePanorama .justImg span {'
                +		'margin-right: 25px;'
                +		'}'
                +	'.largePanorama .interim-info-card>h2 {'
                +		'margin: 0 0 5px;'
                +		'font-size: 16px;'
                +		'font-weight: normal;'
                +		'text-align: center;'
                +		'line-height: 40px;'
                +		'}'
                +	'.largePanorama .interim-info-card a {'
                +		'color: rgb(0, 0, 222) !important;'
                +		'}'
                +	'.largePanorama #details {'
                +		'margin: 0;'
                +		'padding: 0;'
                +		'list-style: none;'
                +		'}'
                +	'.largePanorama #details li {'
                +		'margin-bottom: 6px;'
                +		'padding-top: 0;'
                +		'font-size: 13px;'
                +		'color: #999;'
                +		'clear: both;'
                +		'}'
                +	'.largePanorama #map_info_breadcrumbs {'
                +		'margin-top: 15px;'
                +		'text-align: center;'
                +		'}'
                +	'.largePanorama #place {'
                +		'color: #999;'
                +		'}'
                +	'.largePanorama h2, .largePanorama #place, .largePanorama #details * {'
                +		'color: rgb(66, 66, 66) !important;'
                +		'}'
                +	'.largePanorama .geo {'
                +		'margin-top: 5px;'
                +		'}'

                +	'.gm-style-iw * {'
                +		'overflow: hidden !important;'
                +		'}'
                +	'.gm-style-iw {'
                +		'left: 10px !important;'
                +		'}'

                +   '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div, '
                +   '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(2), '
                +   '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(1) > div:nth-child(4) '
                +       '{ width: 279px !important; max-width: 279px !important;}'
                +   'div.gm-style-iw, div.gm-style-iw > div, .map-info-window '
                +       '{ width: 263px !important; max-width: 263px !important;}'
                +   '#map > div > div:nth-child(1) > div:nth-child(3) > div:nth-child(4) > div > div:nth-child(3)'
                +       '{ right: 5px !important; top: 9px !important; }';
                
        $( '#CssBasic' ).html( CssBasic.formatString() );
    }

    function googleMaps(){

        window.location.href.search('www.panoramio.com/map') > 0 && (
            $( document ).on('hover mouseenter', 'img', function(){
                var ImgParent = $( this ).parents('.map-info-window-img-outer'),
                    mainParent = $( this ).parents('.gm-style-iw').parent(),
                    mainParentWidth = mainParent.width(),
                    search='/photos/small/',
                    src = $( this ).attr('src');

                if( src.search(search) == -1 ) {
                    src.search('logo-tos.png') > 0 &&
                    $( this ).addClass('panoLinkClick').closest('a').attr('href', ImgParent.find('.map-info-window-img-inner a').attr('href') );
                    return false; }

                ImgParent.hasClass( 'Donne' ) || (
                    ImgParent.addClass( 'Donne' ).find('.map-info-window-img-footer-logo a').attr('href', $( this ).closest('a').attr('href') ),
                    $( this ).unwrap()
                );
            })
        );

        $( document ).on('click', 'img', function(e){

            var panoPhoto,
                linkLarge,linkHuge,linkOrginal,linkWrongPosition,reloadHref,
                insertMore,insertRotate,
                startState,startStateLink,
                sizeLarge,sizeHuge,sizeOrginal,
                state,pop,cl,tagcl,panocl,
                panoElem,theTitle,elem,img,
                search='/photos/small/',
                src = $( this ).attr('src'),
                removePano = $('.largePanorama');

            removePano.length && removePano.remove();

            if( src.search(search) == -1 )  {
                ( src.search('logo-tos.png') > 0 || src.search('iw_panoramio.png') > 0 || src.search('/mw-panoramio/photos/thumbnail/') > 0 ) && (
                    e.which != 3 && e.which == 1 && (
                        window.open( $( this ).closest('a').attr('href'), '_blank' ),
                        e.preventDefault()
                    )
                );
                return false;
            }

            pop = src.split(search).pop();
            cl = pop.split('.').shift();
    //		tagcl = '.'+cl;

            elem = $( '.zoom' );
            img = $( '.theImg' );

            panocl = '.largePanorama';

            panoPhoto = 'http://www.panoramio.com/photo/' + cl;
            linkLarge = 'http://static.panoramio.com/photos/large/' + pop;
            linkHuge = 'http://static.panoramio.com/photos/1920x1280/' + pop;
            linkOrginal = 'http://static.panoramio.com/photos/original/' + pop;
            linkWrongPosition = 'http://www.panoramio.com/map_photo/?id=' + cl;

            panoElem = $( this ).parent().next().clone();
            theTitle = $( this ).parent().parent().prev().clone().addClass('TheTitle');

            sizeLarge = new Image(); sizeHuge = new Image(); sizeOrginal = new Image();
            sizeLarge.src = linkLarge; sizeHuge.src = linkHuge; sizeOrginal.src = linkOrginal;

            startState = GM_getValue('startState');
            startStateLink = startState == 'Huge' ? linkHuge : startState == 'Large' && linkLarge;

            reloadHref = locDoc.search('maps.google') > 0 ? $(document).find('#link').attr('href') : locDoc.search('www.panoramio.com/map') > 0 && window.location.href;

            insertMore =
                '<div class="more"><span class="moreArrow skiptranslate">▼</span>'
                    +		'<ul>'
                    +			'<li><a class="reLoad" target="_self" href="'+reloadHref+'">Reload Map this Location</a></li>'
                    +			'<li class="linkOrginal"><a target="_blank" href="'+linkOrginal+'">Orginal in new TAB</a></li>'
                    +			'<li><a target=" _blank" href="'+linkWrongPosition+'">Sugest Location</a></li>'
                    +			'<li><a class="imageRotate">Image Rotate</a></li>'
                    +			'<li><a class="imageDetails">Image Details</a></li>'
                    +			'<li><a class="configStartState">Default Size</a></li>'
                    +		'</ul>'
                    +	'</div>';

            insertRotate =
                '<div id="rotate">'
                    +		'<span class="rotates rotateLeft skiptranslate">▼</span>'
                    +		'<span class="rotates rotateRight skiptranslate">▼</span>'
                    +	'</div>';

            function fn_defArea() {

                var fn_defHtml = function(){
                    var theImg		= 	$('.theImg'),
                        rotates 	= 	parseInt( $( '.largePanorama' ).attr('data-rotate') ),
                        imgWidth 	= 	theImg.width(),
                        imgHeight 	= 	theImg.height(),
                        areaResize 	= 	rotates === 0 	? 	'"0, 0, '+imgWidth+', '+(imgHeight/2)+'"' :
                                        rotates == 	90 	? 	'"0, 0, '+(imgWidth/2)+', '+imgHeight+'"' :
                                        rotates == 	180 ? 	'"0,'+(imgHeight/2)+', '+imgWidth+', '+imgHeight+'"' :
                                        rotates == 	270 && 	'"'+(imgWidth/2)+', 0, '+imgWidth+', '+imgHeight+'"',
                        areaClose 	= 	rotates === 0 	? 	'"0,'+(imgHeight/2)+', '+imgWidth+', '+imgHeight+'"' :
                                        rotates == 	90 	? 	'"'+(imgWidth/2)+', 0, '+imgWidth+', '+imgHeight+'"' :
                                        rotates == 	180 ? 	'"0, 0, '+imgWidth+', '+(imgHeight/2)+'"' :
                                        rotates == 	270 && 	'"0, 0, '+(imgWidth/2)+', '+imgHeight+'"';

                    $('#mymap').html( '<area class="zoom" shape="rect" coords=' + areaResize + ' title="Zoom" data-rotate="'+rotates+'">' +
                                      '<area class="close" shape="rect" coords=' + areaClose + ' title="Close" data-rotate="'+rotates+'">' );

                },	fn_defListner = function(){
                    elem = $('.zoom');
                    img = $( '.theImg');
                    elem.on('mouseup', function(e) {
                        state = img.attr('src').search('large') > 0 ? 'Huge':'Large';
                        e.which == 1 && this == e.target && (
                            state == 'Huge' ? img.attr('src',linkHuge) : state == 'Large' && img.attr('src',linkLarge),
                                elem.parent().attr('data-state',state),
                                fn_defArea() ); });
                    $( '.close' ).on('mouseup', function(e) {
                        e.which == 1 && this == e.target && (
                            $('.largePanorama').remove(),
                                $( document ).off('click', '.largePanorama, .zoom' ) ); });
                };
                setTimeout(fn_defHtml,10 );
                setTimeout(fn_defListner,20 );
            }

            src.search(search) !== -1 && (
                $( 	'<div class="largePanorama '+cl+'" data-rotate="0" style="visibility:hidden;">'
                    +		'<img class="theImg" usemap=" #mymap" src="'+startStateLink+'" />'
                    +		'<map name="mymap" id="mymap" data-state="'+startState+'" />'
                    +	'</div>' ).appendTo('body') );

            function fn_afterImgLoaded() {

                $( theTitle ).prependTo( panocl ); $( insertMore ).appendTo( '.TheTitle' ); $( panoElem.clone().addClass('pano') ).appendTo( panocl );
                $( '<div id="imageDetails" class="'+cl+'"></div>' ).appendTo( panocl );

                GM_xmlhttpRequest({
                    method: "GET",
                    url: panoPhoto,
                    crossDomain: true,
                    //onerror:
                    onprogress: function(res) {
                        var msg = "\n\r\t "
                                + "Onprogress Report."
    //                            + "\nresponseText: " + res.responseText
                                + "\nreadyState: " + res.readyState
                                + "\nresponseHeaders: " + res.responseHeaders
                                + "\nstatus: " + res.status
                                + "\nstatusText: " + res.statusText
                                + "\nfinalUrl: " + res.finalUrl;
    //						+ "\n\nContent-length: " + res.responseHeaders.match('Content-Length: \\d+').toString().split(': ').pop()

                    //    res.readyState == 4 &&
                        console.log(msg);
                    },
                    onload: function(res) {
                        var domain,href,split;
                        res = res.responseText;

                        $('#imageDetails').html( $(res).find('#details').parent() );
                        $( panoElem.clone().addClass('justImg') ).prependTo('.largePanorama .interim-info-card');

                        $('<div id="map_info_breadcrumbs"></div>').insertAfter('#details');
                        $( $(res).find('#place') ).insertAfter('#details');

                        $( $(res).find('#map_info_breadcrumbs').html() ).appendTo('#map_info_breadcrumbs');
                        $( '<span> • </span>' ).appendTo('#map_info_breadcrumbs');
                        $( $(res).find('#map_info_name a') ).appendTo('#map_info_breadcrumbs');
                        $( $(res).find('#location .geo') ).appendTo('#map_info_breadcrumbs');

                        $('#map_info_breadcrumbs').find('a').each(function(id,el){
                                domain = 'http://www.panoramio.com/map/',
                                href = $( el ).attr('href'),
                                split = href.split('/map/').pop();
                            $( el ).addClass('nr'+id);
                            split = split.replace('&z=12&','&z=1&').replace('&z=9&','&z=5&').replace('&z=4&','&z=1&');
                            id !== 1 ? $( el ).attr('href', domain +  split) : $( el ).attr('href', domain);
                        });
                        $('.nr0').attr('href') == $('.nr1').attr('href') && $('.nr1').attr('href', domain +  split.replace('&z=1&','&z=12&').replace('&z=5&','&z=12&'));
                    }
                });

                function createLinks() {

                    //http://developer-agent.com/wp-content/uploads/2015/02/images_no_image_jpg14.jpg
                    $(	'<div class="Size">'
                        +		'<span class="LargeBottonLink"><a target=" _blank" href="'+linkLarge+'">Normal: '+( sizeLarge.naturalWidth + 'x' + sizeLarge.naturalHeight )+'</a></span>'
                        +		'<span class="HugeBottonLink"><a target=" _blank" href="'+linkHuge+'">Large: '+( sizeHuge.naturalWidth + 'x' + sizeHuge.naturalHeight )+'</a></span>'
                        +		'<span class="OrginalBottonLink"><a target=" _blank" href="'+linkOrginal+'">Orginal: '+( sizeOrginal.naturalWidth + 'x' + sizeOrginal.naturalHeight )+'</a></span>'
                        +	'</div>' ).appendTo( panocl );

                    sizeOrginal = sizeOrginal.naturalWidth, sizeHuge = sizeHuge.naturalWidth;

                    sizeOrginal === sizeHuge ?
                        $( '.OrginalBottonLink' ).hide() :
                        sizeOrginal  >  sizeHuge && $( '.moreArrow, .OrginalBottonLink a' ).css('color','darkred');

                    sizeOrginal === sizeHuge && sizeOrginal === sizeLarge.naturalWidth &&
                    $( '.HugeBottonLink, .OrginalBottonLink' ).hide();

                    sizeOrginal === 0 && $( '.linkOrginal' ).hide();

                    $( '.Size span' ).each(function(id,el){
                        $( el ).text().search('0x0') > 0 && $( el ).hide(); });
                }

                var override = setTimeout(function(){
                    clearInterval(checkSize); $('.Size').length === 0 && createLinks();
                    },2500),
                    checkSize = setInterval(function(){
                        sizeOrginal.naturalWidth > 10 && sizeHuge.naturalWidth > 10 && sizeLarge.naturalWidth > 10 && (
                        clearTimeout(override), clearInterval(checkSize), $('.Size').length === 0 && createLinks() );
                    },25);

                $( '.moreArrow, .moreArrow font, .more' ).on('mousedown', function(e) {
                    e.which == 1 && this == e.target && (
                        $( '.more ul' ).show(), timer( 512 ),
                            $( '.reLoad' ).attr('href', $(document).find('#link').attr('href') ) ); });

                $( '.configStartState' ).on('click', function(e) {
                    e.which == 1 && this == e.target && GM_setValue('startState', img.attr('src').search('large') > 0 ? 'Large':'Huge'); });

                $( '.imageDetails, .TheTitle, .Size, .pano' ).on('mouseup', function(e) {
                    var elemLoc = $( '#imageDetails' );
                    l('elemLoc',elemLoc);
                    g.ms === 0 && e.which == 1 && this == e.target && ( timer(64), elemLoc.is(':hidden') ? elemLoc.show(128) : elemLoc.hide(128) ); });

                $( '.imageRotate' ).on('mouseup', function(e) {
                    var elemLoc = $( '.largePanorama'), rotate = $( '#rotate' );
                    e.which == 1 && this == e.target && (
                        rotate.size() === 0 ? $( insertRotate ).appendTo( '.TheTitle'  ) : rotate.remove(),
                            $( '.rotates' ).on('click', function(e) {
                                var rotate = parseInt( elemLoc.attr('data-rotate') );
                                e.which == 1 && this == e.target && (
                                    rotate = $( this ).hasClass('rotateRight') ? ( rotate == 270 ? 0 : rotate + 90 ):( rotate === 0 ? 270 : rotate - 90 ),
                                        elemLoc.attr('data-rotate', rotate ).css('cssText','transform: translate(-50%,-50%) rotate('+rotate+'deg)'),
                                        $( '#imageDetails' ).css('cssText','transform: translate(-50%,-50%) rotate(-'+rotate+'deg)'),
                                        fn_defArea() ); }) ); });

                $( '#imageDetails' ).on('mouseleave', function(e) {
                    $( this ).hide(256); });

                $( '.more ul' ).on('mouseleave', function(e) {
                    g.ms === 0 && this == e.target && $( this ).hide(); });

                $( '.more li a' ).on('click', function(e) {
                    g.ms === 0 && e.which == 1 && this == e.target && $( '.more ul' ).hide(); });
            }

            var checkLoaded = setInterval(function(){
                $( '.theImg').width() > 50 && (
                    clearInterval(checkLoaded), fn_afterImgLoaded(), $( panocl ).css('cssText',''), fn_defArea() );
            },25);

            setInterval( function() {
                var elemLoc = $( '.largePanorama font');
                elemLoc.length > 0 && ( elemLoc.each( function(id,el) { $( el ).replaceWith( $( el ).text() ); }) );
            },3000 );
        });
    }

    //----------------------------------------------------------------------------------------------------------//
    //												  Run Sequence												//
    //----------------------------------------------------------------------------------------------------------//

    $( document ).ready(function(){

        var rImg = $('img');

        ( locDoc.search('maps.google') > 0 || locDoc.search('www.panoramio.com/map') > 0 ) ? ( fn_BasicNew(), googleMaps() ) : (
            locDoc.search('static.panoramio.com/photos/') > 0 && ( $(rImg).width() === 0 || $(rImg).width() === 0 ) ) && (
                rImg.attr('width', rImg.get(0).naturalWidth).attr('height', rImg.get(0).naturalHeight ),
                rImg.simulate('click'),
                console.log('IMG width', rImg.get(0).naturalWidth),
                console.log('IMG width var', rImg.get(0).naturalWidth),
                alert('IMG width')
            );
    });

    //----------------------------------------------------------------------------------------------------------//
    //												    The END													//
    //----------------------------------------------------------------------------------------------------------//

    $( document ).on('click','*',function(e){
        this == e.target && console.log('target',e.target); });



}(jQuery));
长期地址
遇到问题?请前往 GitHub 提 Issues,或加Q群1031348184

赞助商

Fishcpy

广告

Rainyun

注册一下就行

Rainyun

一年攒够 12 元