Permalink
Browse files

Added amount in the sliders

  • Loading branch information...
1 parent ab31a7e commit 10b08afaf418fd6dd0277afc8beecc45f78ab89f @mgallego committed Jan 19, 2013
View
37 src/SFM/PicmntBundle/Resources/public/js/image.js
@@ -7,42 +7,31 @@ $(document).ready(function() {
max:100,
value: 0,
step: 1,
- slide: showValue,
+ slide: showValues,
change: applyFilter
}
);
+ showValues();
});
-
function applyFilter(){
-
- var vBrightness = $( "#slider-brightness" ).slider( "value" );
- var vContrast = $( "#slider-contrast" ).slider( "value" );
- var vSaturation = $( "#slider-saturation" ).slider( "value" );
- var vExposure = $( "#slider-exposure" ).slider( "value" );
-
+ Caman.remoteProxy = "/bundles/sfmpicmnt/libs/caman_proxy.php";
Caman("#image-to-modify", function () {
this.revert(function(){
- this.brightness(vBrightness).contrast(vContrast).saturation(vSaturation).exposure(vExposure).render();
+ this.brightness($( "#slider-brightness" ).slider( "value" ))
+ .contrast($( "#slider-contrast" ).slider( "value" ))
+ .saturation($( "#slider-saturation" ).slider( "value" ))
+ .exposure($( "#slider-exposure" ).slider( "value" ))
+ .render();
});
});
};
-
-
-
- function showValue(){
- console.log('entrando');
-
- var vBrightness = $( "#slider-brightness" ).slider( "value" );
- // var vContrast = $( "#slider-contrast" ).slider( "value" );
- // var vSaturation = $( "#slider-saturation" ).slider( "value" );
- // var vExposure = $( "#slider-exposure" ).slider( "value" );
-
- console.log('Brightness: '.vBrightness);
- // console.log('Contrast: '.vContrast);
- // console.log('Saturation: '.vSaturation);
- // console.log('Exposure: '.vExposure);
+ function showValues(){
+ $( '#brightness-amount' ).val($( "#slider-brightness" ).slider( "value" ));
+ $( '#contrast-amount' ).val($( "#slider-contrast" ).slider( "value" ));
+ $( '#exposure-amount' ).val($( "#slider-exposure" ).slider( "value" ));
+ $( '#saturation-amount' ).val($( "#slider-saturation" ).slider( "value" ));
};
})
View
6 src/SFM/PicmntBundle/Resources/public/less/img_box.less
@@ -62,9 +62,13 @@
#img-controls span.control-title {
color: @darkGrey;
- font-weight: bold;
}
+#img-controls input.slider-data {
+ background: @header-background-color;
+ border: 0;
+ width: 20px;
+}
// ////////////////////////////////////
// img-info
View
35 src/SFM/PicmntBundle/Resources/public/libs/caman_proxy.php
@@ -0,0 +1,35 @@
+<?php
+// Set this to true if you want to be able to load images from a url that doesn't
+// end in an image file extension. E.g. through another proxy of kinds.
+define('ALLOW_NO_EXT', false);
+
+$proxyParam = 'camanProxyUrl';
+
+if (!$_GET[$proxyParam]) {
+ exit;
+}
+
+// Grab the URL
+$url = trim(urldecode($_GET[$proxyParam]));
+
+$urlinfo = parse_url($url, PHP_URL_PATH);
+$ext = array_reverse(explode(".", $urlinfo));
+
+$ctype = null;
+switch ($ext[0]) {
+case 'gif': $ctype = 'image/gif'; break;
+case 'png': $ctype = 'image/png'; break;
+case 'jpeg':
+case 'jpg': $ctype = 'image/jpg'; break;
+default:
+ if (ALLOW_NO_EXT) {
+ $ctype = 'application/octet-stream';
+ } else {
+ exit;
+ }
+}
+
+
+// Route the image through this script
+header("Content-Type: $ctype");
+readfile($url);
View
12 src/SFM/PicmntBundle/Resources/views/Image/viewImageNew.html.twig
@@ -27,6 +27,10 @@
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
+ <script>
+ Caman.remoteProxy = "{{ asset('bundles/sfmpicmnt/libs/caman_proxy.php') }}";
+ </script>
+
{% endblock javascript %}
{% block content %}
@@ -42,9 +46,9 @@
<div class="clear"></div>
<article id="image" class="grid_9">
- {# <img src="http://pcdn.500px.net/22932653/12b47fc53ef8d48a1d731807c27e3c5485b36d96/4.jpg" id="image-to-modify" alt="{{image.title}}"> #}
+ <img src="http://pcdn.500px.net/22932653/12b47fc53ef8d48a1d731807c27e3c5485b36d96/4.jpg" id="image-to-modify" alt="{{image.title}}">
{# <img src="http://pcdn.500px.net/23010177/bd2ba092a30565032f4ab287cecfc714a6962524/4.jpg" id="image-to-modify" alt="{{image.title}}"> #}
- <img src="{{ asset(upload_dir ~ image.url) }}" id="image-to-modify" alt="{{image.title}}">
+ {# <img src="{{ asset(upload_dir ~ image.url) }}" id="image-to-modify" alt="{{image.title}}"> #}
</article>
<section class="grid_3">
@@ -75,6 +79,7 @@
<span class="control-title">
{% trans %}Brightness{% endtrans %}:
</span>
+ <input type="text" id="brightness-amount" name="brightness" class="slider-data"/>
</div>
<div id="slider-brightness" class="slider"></div>
@@ -83,6 +88,7 @@
<span class="control-title">
{% trans %}Contrast{% endtrans %}:
</span>
+ <input type="text" id="contrast-amount" name="contrast" class="slider-data"/>
</div>
<div id="slider-contrast" class="slider"></div>
@@ -91,6 +97,7 @@
<span class="control-title">
{% trans %}Exposure{% endtrans %}:
</span>
+ <input type="text" id="exposure-amount" name="exposure" class="slider-data"/>
</div>
<div id="slider-exposure" class="slider"></div>
@@ -99,6 +106,7 @@
<span class="control-title">
{% trans %}Saturation{% endtrans %}:
</span>
+ <input type="text" id="saturation-amount" name="saturation" class="slider-data"/>
</div>
<div id="slider-saturation" class="slider"></div>

0 comments on commit 10b08af

Please sign in to comment.