Кропинг Jquery в слайдере
Есть замечательный простой кропинг который и центрует изображение и правильно его обрезает
<script src="/js/jquery.resizecrop-1.0.3.min.js"></script> <script> $(document).ready(function(){ $('.slide').resizecrop({ width:320, height:320, vertical:"top" }); }); </script> Но вот проблема как его правильно прикрутить к слайдеру, в слайдере не хочет работать слайдер формируется из заранее выбранных изображений на клиенте на этой же странице следующим образом, <script> $(function() { $(".image").change(showPreviewImage_click); } ) var num = 0; function showPreviewImage_click(e) { var $input = $(this); var inputFiles = this.files; if(inputFiles == undefined || inputFiles.length == 0) return; for (var i = 0; i<inputFiles.length; i++) { var id = 'id'+ ++num; var input = $('<input/>', {'type': "radio", 'name': "slide_switch", 'id': id,'checked':"checked"}); input.appendTo($('.slider')); var label = $('<label/>', {'for': id}); var img_min = $('<img/>', {'class': 'min'}); img_min.appendTo(label); label.appendTo($('.slider')); var inputFile = inputFiles[i]; var img = $('<img/>', {'class': 'slide'}); img.appendTo($('.slider')); var reader = new FileReader(); reader.onload = (function (img1, img2) { return function(event) { img1.attr("src", event.target.result); img2.attr("src", event.target.result); }; } )(img_min, img) reader.onerror = function(event) { alert("I AM ERROR: " + event.target.error.code); }; reader.readAsDataURL(inputFile);} } </script> помогите пожалуйста в слайдер вставлять уже кропированное изображение, видимо требуется как то менять указанный код который формирует слайдер так чтобы в слайдер попадало уже кропированное изображение желательно без сервера, помогите пожалуйста кто может |
imediasun1,
зачем плодить новые темы ? и можно же подумать раз плагин работает с уже загруженными изображениями то и подключать его надо после загрузки изображения - после каждого изображения -- строка 32 дальше я думаю сами сообразите. и вот это что то бессмысленное Цитата:
|
'checked':"checked"}); - для того чтобы слайд сразу отображался в слайдере без этого не отображается, а плагин прикрутить все таки не получается, напишите пожалуйста как это сделать, спасибо большое дело в том что слайдер перестает функционировать как слайдер если я уже на слайдер накладываю плагин кропинга, нужно как то сохранить наверное в переменную кропированное изображение и передавать его в слайдер, помогите пожалуйста до конца, может даже сохраняя на сервере как измененное изображение, я очень слаб в js пока что, я думаю вы успели заметить это спасибо
|
imediasun1,
resizecrop подключить к картинкам можно но что вы называите слайдером понятия неимею Цитата:
|
Эти картинки составляют слайдер, может быть конфликтует с resizecrope вот этот плагин, но скорее всего я думаю я к картинкам не правильно resizecrop подключаю, напишите как вы бы подключили пожалуйста
работу самого слайдера можно посмотреть здесьhttp://thecodeplayer.com/walkthrough...zed-thumbnails |
imediasun1,
:cray: <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://resize-crop.googlecode.com/files/jquery.resizecrop-1.0.3.js"></script> <style type="text/css"> .min { width: 45px; } </style> </head> <body> <input type="file" name="my-pic" id="file-field" class="image" multiple=""/> <div class="slider" ></div> <script> $(function() { $(".image").change(showPreviewImage_click); } ) var num = 0; function showPreviewImage_click(e) { var $input = $(this); var inputFiles = this.files; if(inputFiles == undefined || inputFiles.length == 0) return; for (var i = 0; i<inputFiles.length; i++) { var id = 'id'+ ++num; var input = $('<input/>', {'type': "radio", 'name': "slide_switch", 'id': id}); input.appendTo($('.slider')); var label = $('<label/>', {'for': id}); var img_min = $('<img/>', {'class': 'min'}); img_min.appendTo(label); label.appendTo($('.slider')); var inputFile = inputFiles[i]; var img = $('<img/>', {'class': 'slide'}); img.appendTo($('.slider')) var reader = new FileReader(); reader.onload = (function (img1, img2) { return function(event) { img1.attr("src", event.target.result); img2.attr("src", event.target.result); img2.resizecrop({ width:320, height:320, vertical:"top" }); }; } )(img_min, img) reader.onerror = function(event) { alert("I AM ERROR: " + event.target.error.code); }; reader.readAsDataURL(inputFile);} input.prop({'checked': true}) } </script> </body> </html> |
Спасибо, я так уже пробовал но не ресайзит
|
Цитата:
зачем там скрипт непонятно -- всё на css в слайдере том |
загружаем с Shift или Ctrl несколько фото и смотрим
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://resize-crop.googlecode.com/files/jquery.resizecrop-1.0.3.js"></script> <style type="text/css"> /*Time for the CSS*/ * {margin: 0; padding: 0;} body {background: #ccc;} .slider{ width: 640px; /*Same as width of the large image*/ position: relative; /*Instead of height we will use padding*/ padding-top: 320px; /*That helps bring the labels down*/ margin: 100px auto; /*Lets add a shadow*/ box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); } /*Last thing remaining is to add transitions*/ .slider > img{ max-height: 320px; min-width: 640px; position: absolute; left: 0; top: 0; transition: all 0.5s; } .slider input[name='slide_switch'] { display: none; } .slider label { /*Lets add some spacing for the thumbnails*/ margin: 18px 0 0 18px; border: 3px solid #999; float: left; cursor: pointer; transition: all 0.5s; /*Default style = low opacity*/ opacity: 0.6; } .slider label img{ display: block; height: 45px; } /*Time to add the click effects*/ .slider input[name='slide_switch']:checked+label { border-color: #666; opacity: 1; } /*Clicking any thumbnail now should change its opacity(style)*/ /*Time to work on the main images*/ .slider input[name='slide_switch'] ~ img { opacity: 0; -moz-transform: scale(1.1); /* Для Firefox */ -ms-transform: scale(1.1); /* Для IE */ -webkit-transform: scale(1.1); /* Для Safari, Chrome, iOS */ -o-transform: scale(1.1); /* Для Opera */ transform: scale(1.1); } /*That hides all main images at a 110% size On click the images will be displayed at normal size to complete the effect */ .slider input[name='slide_switch']:checked+label+img { opacity: 1; -moz-transform: scale(1); /* Для Firefox */ -ms-transform: scale(1); /* Для IE */ -webkit-transform: scale(1); /* Для Safari, Chrome, iOS */ -o-transform: scale(1); /* Для Opera */ transform: scale(1); } /*Clicking on any thumbnail now should activate the image related to it*/ /*We are done :)*/ </style> </head> <body> <input type="file" name="my-pic" id="file-field" class="image" multiple=""/> <div class="slider" ></div> <script> $(function() { $(".image").change(showPreviewImage_click); } ) var num = 0; function showPreviewImage_click(e) { var $input = $(this); var inputFiles = this.files; if(inputFiles == undefined || inputFiles.length == 0) return; for (var i = 0; i<inputFiles.length; i++) { var id = 'id'+ ++num; var input = $('<input/>', {'type': "radio", 'name': "slide_switch", 'id': id}); input.appendTo($('.slider')); var label = $('<label/>', {'for': id}); var img_min = $('<img/>', {'class': 'min'}); img_min.appendTo(label); label.appendTo($('.slider')); var inputFile = inputFiles[i]; var img = $('<img/>', {'class': 'slide'}); img.appendTo($('.slider')) var reader = new FileReader(); reader.onload = (function (img1, img2) { return function(event) { img1.attr("src", event.target.result); img2.attr("src", event.target.result); }; } )(img_min, img) reader.onerror = function(event) { alert("I AM ERROR: " + event.target.error.code); }; reader.readAsDataURL(inputFile);} input.prop({'checked': true}); } </script> </body> </html> |
а где ресайз, мне надо чтобы загружаемые фотки были с кропом 320 на 320
|
Часовой пояс GMT +3, время: 08:53. |