I am trying to make images larger than their viewing width will be open in my image viewer. However, at 720p and Google Chrome, I get 0 for the width for both the original and the width of the viewports ...
Here is an example of a page where the image should be open in the BFX view (try it in Chrome at a lower resolution): Live example
History (the first image scan is an image)
Starting BFX View Version 0.3 Build 61 alpha bfxcore.js:92 BFX View -> Looking for images in: .postpreview... bfxcore.js:92 BFX View -> Looking for images in: .content... bfxcore.js:109 Image: http:
Javascript
$(function(){ /**************************************************** / BFX View version 0.3 build 56 / by WASasquatch for BeeskneesFX.com /***************************************************/ // Global vars var appname = 'BFX View', appflag = 'alpha', appversion = 0.3, appbuild = 61, // Selectors findImagesIn = new Array( '.postpreview', '.content', '.restore', '.postbody' ), // Master container class/id - all image tags in children elements get selected // Theater selectors theater = $('#theater-box'), theaterimg = theater.find('#theater-img'), theaterclose = theater.find('#theater-header span'); console.log('Starting '+appname+' Version '+appversion+' Build '+appbuild+' '+appflag); if ( notMobile === false ) { console.log(appname+' detected a mobile device. Disabling BFX View for performance. Visit us on a desktop!'); } else { // Start a BFX View selector for (i=0; i<findImagesIn.length; i++) { console.log(appname+' -> Looking for images in: '+findImagesIn[i]+'...'); $(findImagesIn[i]).each(function(){ bfxView('.'+$(this).attr('class')); }); } } function bfxView(id) { var imgCount = 0; $(id).each(function(){ $(this).find('img').each(function () { var img = $(this), width, height, origWidth = $(this).width(); hiddenImg = img.clone().attr('class','').attr('id','').css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('#loading-images'); height = hiddenImg.height(); width = hiddenImg.width(); hiddenImg.remove(); console.log('Image: '+$(this).attr('src')+' Original Width: '+origWidth+' Against: '+width); if ( width > origWidth ) { imgCount++; $(this).css('cursor', 'pointer'); var parent = $(this).parent(); if ( parent.attr('href') == $(this).attr('src') ) { parent.attr('target','_self'); parent.removeAttr('href'); } $(this).click(function () { var startingPoint = $(document).scrollTop(), theaterActive = true, bodyo = $('body').css('overflow'); $('body').css('overflow', 'hidden'); theaterimg.html('<img src="' + $(this).attr('src') + '" alt="Medium View" />'); setTimeout(function(){ theaterimg.find('img').each(function(){ var renderWidth = $(this).width(); if ( renderWidth < width ) { $(this).css('cursor', 'pointer'); theater.find('#viewfull').attr('href', '/viewer.html?src='+Base64.encode($(this).attr('src'))+'&t='+Base64.encode(window.location.href)); theater.on('click', '#theater-img img', function(){ window.location.href = '/viewer.html?src='+Base64.encode($(this).attr('src'))+'&t='+Base64.encode(window.location.href); }); } else { theater.find('#viewfull').remove(); $(this).attr('alt','Full Resolution View'); } }); },0); theater.fadeIn(1000, function () { theaterclose.click(function () { theater.fadeOut(1000, function() { theaterActive = false; }); $('body').css('overflow', bodyo); }); }); }); } }); }); console.log(appname+' -> '+imgCount+' images found in '+id); } });
I changed the search code, intending to make sure that all possible classes were checked. The old code to start the search was
for (i=0; i<findImagesIn.length; i++) { console.log(appname+' -> Looking for images in: '+findImagesIn[i]+'...'); bfxView(findImagesIn[i]); }
Updated Code Still Don't Get Involved In Chrome And Don't Break Firefox With This Editing. This will tell me that “Width” and “Height” are not defined, for example, the image does not load.
$(this).find('img').each(function () { $(this).load(function(){ var img = $(this), width, height, origWidth = $(this).outerWidth(); hiddenImg = img.clone().attr('class','').attr('id','').css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('#loading-images'); height = hiddenImg.height(); width = hiddenImg.width(); hiddenImg.remove(); });