1

I'm trying to implement a jQuery-based image crop function that exports to base64 text. CropIt seems perfect for the job, and works beautifully, UNLESS it's not the first jQuery Mobile page in the list of jQm "pages", that displays by default in the HTML file. If it's not, everything works except for the zoom slider. I've created a jsFiddle to illustrate the problem:

http://jsfiddle.net/f97r3suf/5/

Any help getting the zoom slider to work would be appreciated, thanks! Code attached.

<!-- ********* DEFAULT JQUERY MOBILE PAGE **************** -->
<div data-role="page" id="splash" data-theme="f">
    <div data-role="content">
        <p>Here's a stripped-down example based on the sample CropIt code on GitHub. The long URL in the external resources list is a "locally" hosted version of Cropit.min.js on Google Drive. Everything else works, including the imageState tag, the drag-to-pan on the image, the image upload and export. Only the zoom slider doesn't work.</p>
        <a href="#upload" data-role="button" data-theme="b">Example: CropIt is the second jQm page</a>
        <p>If I switch the order of the jQuery Mobile pages, so that the Cropit page is the first (default) page of the HTML instead of this page, the zoom works fine: <a href="http://jsfiddle.net/jLqjvzdu/1" data-role="button" data-theme="b" target="_blank">Example: Cropit is the first jQm page.</a></p> 
    </div>
</div>
<!-- ******** UPLOAD PAGE ******* -->
<div data-role="page" id="upload" data-close-btn="none">
    <div data-role="content" style="padding:0px">
        <!-- content -->
        <div class="image-editor">
            <input type="file" class="cropit-image-input">
            <div class="cropit-image-preview"></div>
            <div class="image-size-label">Resize image</div>
            <input type="range" class="cropit-image-zoom-input">
            <button class="export">Export</button>
        </div>
    </div>
</div>
Pablo Carson
  • 342
  • 1
  • 4
  • 13
  • 1
    initialize the plugin when the target page is created. http://jsfiddle.net/Palestinian/f97r3suf/6/ – Omar Nov 02 '14 at 17:10
  • That worked, thanks! I have to disagree that this question was answered before, the linked answer is very broad, answers a very different question, and mine was specifically in the context of using a jQuery plugin with jQuery Mobile. – Pablo Carson Nov 02 '14 at 17:48
  • The dupe answers your question in spite of used plugins. It could be too broad but it comprehensively explains the way JQM works. Reopening. – Omar Nov 02 '14 at 18:21

0 Answers0