Warning: The author of this contribution does not provide support for it anymore.

ReIMG Image Resizer

Load image before or while resizing - ReIMG Image Resizer

Load image before or while resizing

by Seeeler » Wed Apr 30, 2014 7:29 am

Hi,

Thanks for the great mod, is this possible to load the image before or while resizing?
I hate to see the loader and wait for image while seeing loader keep loading if the image is big which takes time, sometimes it keeps loading but image does not appear, then have to refresh the page to see the image.

It would be great of it could load the full image while resizing. something like this:

Code: Select all

http://phpbbegypt.net/phpBB3/viewtopic.php?f=2&t=9



Thanks in advance.
Seeeler
Registered User
Posts: 78
Joined: Sat Apr 28, 2012 9:03 pm
Contact:

Re: Load image before or while resizing

by DavidIQ » Wed Apr 30, 2014 10:24 am

You would have to remove the hidden attribute of the .reimg CSS class which is in the reimg_content.html file. If that doesn't work then there might be additional edits needed to the core JavaScript file.
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 17182
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón
Contact:

Re: Load image before or while resizing

by Seeeler » Wed Apr 30, 2014 7:44 pm

Thanks for the reply mate but it does seem to work for me.

These are the changes i made, please check if my reimg_content.html has correct edits.

Code: Select all

<!-- IF S_REIMG -->
<script type="text/javascript">
// <![CDATA[
   /**
   * Resize too large images
   */
   var reimg_maxWidth = {REIMG_MAX_WIDTH}, reimg_maxHeight = {REIMG_MAX_HEIGHT}, reimg_relWidth = {REIMG_REL_WIDTH};
   var reimg_swapPortrait = <!-- IF S_REIMG_SWAP_PORTRAIT -->true<!-- ELSE -->false<!-- ENDIF -->;
   var reimg_loadingImg = "{T_IMAGES_PATH}spacer.gif";
   var reimg_loadingStyle = "width: 16px; height: 16px; background: url({T_IMAGESET_PATH}/icon_reimg_loading.gif) top left no-repeat; filter: Alpha(Opacity=50); opacity: .50;";
   var reimg_loadingAlt = "{LA_LOADING_TEXT}";
   <!-- IF S_REIMG_LINK -->
   var reimg_autoLink = true;
   <!-- ENDIF -->
   <!-- IF S_REIMG_BUTTON -->
   var reimg_zoomImg = "{T_IMAGES_PATH}spacer.gif";
   var reimg_zoomStyle = "width: 20px; height: 20px; background: url({T_IMAGESET_PATH}/icon_reimg_zoom_in.gif) top left no-repeat; filter: Alpha(Opacity=50); opacity: .50;";
   var reimg_zoomHover = "background-position: 0 100%; cursor: pointer; filter: Alpha(Opacity=100); opacity: 1.00;";
   <!-- ENDIF -->
   var reimg_zoomAlt = "{LA_REIMG_ZOOM_IN}";
   var reimg_zoomTarget = "{S_REIMG_ZOOM}";
   var reimg_ajax_url = "{REIMG_AJAX_URL}";

   function reimg(img, width, height)
   {
      if (window.reimg_version)
      {
         reimg_resize(img, width, height);
      }
   }
// ]]>
</script>

<script type="text/javascript" src="{ROOT_PATH}reimg/reimg.js"></script>

   <!-- IF S_REIMG_ZOOM or S_REIMG_XHTML -->
<style type="text/css" media="screen, projection">
<!--
   <!-- IF S_REIMG_ZOOM -->
   #topicreview .reimg-zoom { display: none; }
   <!-- ENDIF -->
   <!-- IF S_REIMG_XHTML -->
   .reimg { width: 10%; height: auto; visibility: visible; }
   <!-- ENDIF -->
-->
</style>
   <!-- ENDIF -->
   <!-- IF S_REIMG_ZOOM_METHOD eq '_highslide' -->
<script type="text/javascript" src="{ROOT_PATH}reimg/highslide/highslide-full.packed.js"></script>
<link rel="stylesheet" type="text/css" href="{ROOT_PATH}reimg/highslide/highslide.css" />
   <!-- ENDIF -->
   <!-- IF S_REIMG_ZOOM_METHOD eq '_lytebox' -->
<script type="text/javascript" src="{ROOT_PATH}reimg/lytebox/lytebox.js"></script>
<link rel="stylesheet" type="text/css" href="{ROOT_PATH}reimg/lytebox/lytebox.css" />
   <!-- ENDIF -->
<script type="text/javascript">
// <![CDATA[
   /**
   * Light box for resized images
   */
   <!-- IF S_REIMG_ZOOM_METHOD eq '_highslide' -->
   if (window.hs)
   {
      hs.graphicsDir = "{ROOT_PATH}reimg/highslide/graphics/";
      // Language settings for Highslide JS
      hs.lang.cssDirection = "{S_CONTENT_DIRECTION}";
      hs.lang.loadingText = "{LA_LOADING_TEXT}";
      hs.lang.loadingTitle = "{LA_LOADING_TITLE}";
      hs.lang.focusTitle = "{LA_FOCUS_TITLE}";
      hs.lang.fullExpandTitle = "{LA_FULL_EXPAND_TITLE}";
      hs.lang.creditsText = "{LA_CREDITS_TEXT}";
      hs.lang.creditsTitle = "{LA_CREDITS_TITLE}";
      hs.lang.previousText = "{LA_PREVIOUS_TEXT}";
      hs.lang.nextText = "{LA_NEXT_TEXT}";
      hs.lang.moveText = "{LA_MOVE_TEXT}";
      hs.lang.closeText = "{LA_CLOSE_TEXT}";
      hs.lang.closeTitle = "{LA_CLOSE_TITLE}";
      hs.lang.resizeTitle = "{LA_RESIZE_TITLE}";
      hs.lang.playText = "{LA_PLAY_TEXT}";
      hs.lang.playTitle = "{LA_PLAY_TITLE}";
      hs.lang.pauseText = "{LA_PAUSE_TEXT}";
      hs.lang.pauseTitle = "{LA_PAUSE_TITLE}";
      hs.lang.previousTitle = "{LA_PREVIOUS_TITLE}";
      hs.lang.nextTitle = "{LA_NEXT_TITLE}";
      hs.lang.moveTitle = "{LA_MOVE_TITLE}";
      hs.lang.number = "{LA_IMAGE_NUMBER}";
      hs.lang.restoreTitle = "{LA_RESTORE_TITLE}";
      hs.dimmingOpacity = 0.75;
   }
   <!-- ELSEIF S_REIMG_ZOOM_METHOD eq '_lytebox' -->
   var reimg_lytebox = true;
   <!-- ELSE -->
   var litebox_alt = "<!-- IF S_REIMG_LINK -->{LA_REIMG_ZOOM_OUT}<!-- ELSE -->{LA_IMAGE}<!-- ENDIF -->";
      <!-- IF S_REIMG_ZOOM_METHOD eq '_litebox' -->
         <!-- IF S_REIMG_BUTTON -->
   var litebox_zoomImg = reimg_zoomImg;
   var litebox_zoomStyle = reimg_zoomStyle;
   var litebox_zoomHover = reimg_zoomHover;
   var litebox_zoomAlt = reimg_zoomAlt;
         <!-- ELSE -->
   var litebox_zoomImg = "{T_IMAGES_PATH}spacer.gif";
   var litebox_zoomStyle = "width: 20px; height: 20px; background: url({T_IMAGESET_PATH}/icon_reimg_zoom_in.gif) top left no-repeat; filter: Alpha(Opacity=50); opacity: .50;";
   var litebox_zoomHover = "background-position: 0 100%; cursor: pointer; filter: Alpha(Opacity=100); opacity: 1.00;";
   var litebox_zoomAlt = "{LA_REIMG_ZOOM_IN}";
         <!-- ENDIF -->
      <!-- ELSEIF S_REIMG_ZOOM_METHOD eq '_litebox1' -->
   var reimg_zoomLevel = 100;
      <!-- ENDIF -->
      <!-- IF S_REIMG_LINK -->
   var litebox_style = "cursor: pointer;"
      <!-- ENDIF -->
      <!-- IF S_REIMG_BUTTON -->
   var litebox_closeImg = "{T_IMAGES_PATH}spacer.gif";
   var litebox_closeStyle = "width: 20px; height: 20px; background: url({T_IMAGESET_PATH}/icon_reimg_zoom_out.gif) top left no-repeat; filter: Alpha(Opacity=50); opacity: .50;";
   var litebox_closeHover = reimg_zoomHover;
   var litebox_closeAlt = "{LA_REIMG_ZOOM_OUT}";
      <!-- ENDIF -->
   var litebox_rtl = <!-- IF S_CONTENT_DIRECTION eq 'rtl' -->true<!-- ELSE -->false<!-- ENDIF -->;
   <!-- ENDIF -->
// ]]>
</script>

   <!-- IF S_REIMG_ZOOM_METHOD eq '_litebox' or S_REIMG_ZOOM_METHOD eq '_litebox1' -->
<script type="text/javascript" src="{ROOT_PATH}reimg/litebox.js"></script>
   <!-- ENDIF -->
   <!-- IF S_REIMG_ATTACHMENTS -->
<style type="text/css" media="screen, projection">
<!--
   .attachbox { width: 97%; }
   .attach-image
   {
      max-height: none;
   }
-->
</style>
   <!-- ENDIF -->
<!-- ENDIF -->
Seeeler
Registered User
Posts: 78
Joined: Sat Apr 28, 2012 9:03 pm
Contact:

Re: Load image before or while resizing

by Seeeler » Sat May 03, 2014 6:02 am

any solution?
Seeeler
Registered User
Posts: 78
Joined: Sat Apr 28, 2012 9:03 pm
Contact:

Re: Load image before or while resizing

by DavidIQ » Tue May 06, 2014 3:44 pm

Not really, no. I've basically moved on from making or suggesting any heavy changes to the 3.0 version of ReIMG in preparation of a 3.1 release. I gave you what I could remember off the top of my head but it looks like you'll have to go through the reimg.js file and take out the part that replaces images with the "loading" indicator.
Apply to become a Jr. Extension Validator
My extensions | In need of phpBB services? | Was I helpful today?
No unsolicited PMs unless you're planning on asking for paid help.
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 17182
Joined: Thu Jan 06, 2005 1:30 pm
Location: Fishkill, NY
Name: David Colón
Contact:

Re: Load image before or while resizing

by Strappado » Thu Nov 13, 2014 8:09 pm

Open reimg.js

Edit visibility, height and width in this line:

Code: Select all

document.writeln('.reimg { width: 1px; height: 1px; visibility: hidden; }')


For example

Code: Select all

document.writeln('.reimg { max-width: 500px; max-height: 500px; visibility: visible; }')


You can remove or edit the loading image in reimg_content.html

Code: Select all

var reimg_loadingImg = "{T_IMAGES_PATH}spacer.gif";
var reimg_loadingStyle = "width: 16px; height: 16px; background: url({T_IMAGESET_PATH}/icon_reimg_loading.gif) top left no-repeat; filter: Alpha(Opacity=45); opacity: .45;";
User avatar
Strappado
Registered User
Posts: 98
Joined: Sun Feb 12, 2012 11:53 am
Location: Sweden
Contact: