Ориентация на снимка - промяна при клик

Ticketa

Registered
Привет,
опитвам се да направя когато се натисне на дадена снимка или бутон върху снимка (и двете неща ще ми вършат работа) снимката да се "завърта" както аз искам.

Когато имам 1бр снимка (прикачена чрез upload форма и опция за преглед "preview") няма проблем - скрипта бачка, но когато имам повече снимки скрипта се чупи, тъй като всяка снимка си има индивидуален №

Ползвам следния код:
jss
Код:
function Rotate() {
		var element = document.getElementById('image');

		if (element.className === "normal") {
			element.className = "rotate";
		}
		else if ( element.className === "rotate") {
			element.className = 'normal';
		}
	}
css
Код:
.rotate {
   -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
}

.normal {
   -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
}

html
Код:
<html>
<head>
</head>
<body>

<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image"/>

</body>
</html>

тоест, ако имам:

<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image_123456"/>
<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image_112323456"/>
<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image_12asd34asd56asdasd"/>
<img src="http://i.stack.imgur.com/IAY0q.png" alt="image" onclick="Rotate()" class="normal" id="image_123asd45445456"/>

Скрипта няма да работи, тъй като не разчита id="..."
 
Може вместо да търсиш снимката да я подаваш като аргумент на функцията:
onclick="Rotate(this)"
и да направиш функцията така:
[js]function Rotate(element) {
if (element.className === "normal") {
element.className = "rotate";
}
else if ( element.className === "rotate") {
element.className = 'normal';
}
} [/js]

За бутон... има ли причина да не използваш jQuery?
 
Нещо не сработва кода.. Премахването(иконата) работи коректно, но самото завъртане на снимката - не.

прикачвам файловете:

В конзолата на FireBug получавам следната грешка:
ReferenceError: element is not defined[Learn More]
image-uploader.js:95:1
rotatePhoto
/image-uploader.js:95:1
imageUploader/<
/image-uploader.js:228:17
dispatch

Редове: 95: if (element.className === "normalx") {
редове: 228: rotatePhoto($(this));

html/php:
Код:
<div data-storage="locale" data-id="<?= $img['image']; ?>" data-pk="<?= $img['image_id']; ?>" class="image-item lot-photo-block">
                        <div class="lot-photo-inner">
                            <div class="lot-photo-wrp">
                                <img src="<?= $file; ?>" class="normalx" alt="">
                            </div>
                            <a href="#" class="del-lot-photo btn-remove"></a>
                            <a href="#" class="rotate-lot-photo btn-rotate"></a>
                        </div>
                    </div>

<script id="item-image" type="text/x-jquery-tmpl">
    <div data-storage="${storage}" data-id="${id}" class="image-item lot-photo-block">
        <div class="lot-photo-inner">
            <div class="lot-photo-wrp">
                <img src="${img.src}" class="normalx" alt="">
            </div>
            <a href="#" class="del-lot-photo btn-remove"></a>
            <a href="#" class="rotate-lot-photo btn-rotate"></a>
        </div>
    </div>
</script>


jQuery:
[js](function ($) {
var defaults = {
csrfToken: null,
csrfTokenName: null,
uploadUrl: '',
deleteUrl: '',
arrangeUrl: '',
mainPhotoText: '',
additionalPhotoText: '',
photos: []
};

function imageUploader(el, options) {
var settings = $.extend({}, defaults, options);
var $main = $(el);
var $identifier = $('input[name="identifier"]', $main).val();
var $images = $('.image-container');
var csrfParams = settings.csrfToken ? '&' + settings.csrfTokenName + '=' + settings.csrfToken : '';
var $loader = $('.loader-progresbar-wrp', $main);

function updateAction() {
size = $('.image-container .image-item').size();
if (size > 1) {
$('#image-upload-block .add-photo-top').html('<p>'+ settings.mainPhotoText +'</p><p>'+ settings.additionalPhotoText +'</p>');
} else {
$('#image-upload-block .add-photo-top').html('<p>'+ settings.mainPhotoText +'</p>');
}
}

function addPhoto(resp) {
var data = {
'img': {'src': resp.data.file},
'id': resp.data.name,
'storage': 'tmp',
'size': resp.data.size
};
var $item = $('#item-image').tmpl(data);

$images.append($item);
updateAction();

return $item;
}

function deletePhoto(el) {
var photo = $(el).parents('.image-item');
var id = photo.data('id');
var pk = photo.data('pk');
var storage = photo.data('storage');
var model = $('input[name="model"]').val();

var data = {
'id': id,
'pk': pk,
'storage': storage,
'model': model,
'identifier': $identifier
};
if (settings.csrfToken)
data[settings.csrfTokenName] = settings.csrfToken;

$.ajax({
type: 'POST',
dataType: 'json',
url: settings.deleteUrl,
data: data,
success: function (data) {
if (data.response.status == 'success') {
photo.remove();
$('input[name="sort[' + (pk ? pk : id) + ']"]', '.sorted-container').remove();
} else {
/*alert(data.response.status);*/
}
}
});
updateAction();
}
function rotatePhoto(el) {
var photo = $(el).parents('.image-item');
var id = photo.data('id');
var pk = photo.data('pk');
var storage = photo.data('storage');
var model = $('input[name="model"]').val();

var data = {
'id': id,
'pk': pk,
'storage': storage,
'model': model,
'identifier': $identifier
};
if (settings.csrfToken)
data[settings.csrfTokenName] = settings.csrfToken;

if (element.className === "normalx") {
element.className = "rotatex";
}
else if ( element.className === "rotatex") {
element.className = 'normalx';
}

updateAction();
}
function update() {
$('.sorted-container').empty();
$($images).find('.image-item').each(function (i, val) {
var id = $(val).data('id');
var pk = $(val).data('pk');
$('.sorted-container').append('<input type="hidden" name="sort[' + (pk ? pk : id) + ']" value="' + i + '">');
});
}

function multiUploadIE() {

$($loader).find('.loader-progresbar').css({'width': '0%'});
$loader.show();
$($loader).find('.loader-progresbar').css({'width': '50%'});

var ids = [];

$.ajax({
type: 'POST',
url: settings.uploadUrl,
data: $(':input', '#form-create-lot').add(':not:)file)').serializeArray(),
files: $(":file", '#form-create-lot'),
iframe: true,
processData: false,
dataType: "json"
}).complete(function (resp) {
if (resp.status == 200) {
var resp = JSON.parse(resp.responseText);
if (resp.response.status == 'success') {
addPhoto(resp.response);
update();
} else {
$.each(resp.response.data.file, function (i, e) {
alert(e);
});
}

$($loader).find('.loader-progresbar').css({'width': '100%'});
} else {
alert("Error");
}
$loader.hide();
});
return false;
}

function multiUpload(files) {

var uploadFileName = $('.file', $main).attr('name');

var filesCount = files.length;
var uploadedCount = 0;
var ids = [];
for (var i = 0; i < filesCount; i++) {

$($loader).find('.loader-progresbar').css({'width': '1%'});
$loader.show();

var fd = new FormData();
fd.append(uploadFileName, files);
fd.append('identifier', $identifier);

if (settings.csrfToken) {
fd.append(settings.csrfTokenName, settings.csrfToken);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', settings.uploadUrl, true);
xhr.onload = function () {
uploadedCount++;
if (this.status == 200) {
var resp = JSON.parse(this.response);
if (resp.response.status == 'success') {
addPhoto(resp.response);
update();
} else {
$.each(resp.response.data.file, function (i, e) {
alert(e);
});
}
} else {
alert("Error");
}
$loader.hide();

};

xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
$($loader).find('.loader-progresbar').css({'width': (e.loaded / e.total) * 100});
}
};

xhr.send(fd);
}
return false;
}

$('.file', $main).attr('multiple', 'true').on('change', function (e) {


if (!window.FormData) {
multiUploadIE();
} else {
multiUpload(this.files);
}

});

$($images).sortable({
stop: function () {
update();
},
cancel: '.add-photo',
forcePlaceholderSize: true,
placeholder: 'lot-plaseholder'
}).disableSelection();

$('#image-upload-block').on('click', 'a.btn-remove', function () {

deletePhoto($(this));
return false;
});
$('#image-upload-block').on('click', 'a.btn-rotate', function () {

rotatePhoto($(this));
return false;
});

}

$.fn.imageUploader = function (options) {
if (this.length) {
this.each(function () {
imageUploader(this, options);
});
}
};

})(jQuery);
[/js]
 
Не виждам елемента с id=image-upload-block към който слагаш listener-ите
Иначе във функцията rotatePhoto:
[js]var element = $(el).find('img');
if (element.hasClass('normal')) {
element.removeClass('normal').addClass('rotate');
}
else if (element.hasClass('rotate')) {
element.removeClass('rotate').addClass('normal');
}[/js]

Всъщност даже нямаш нужда от класа normal, картинката по подразбиране си е без ротация, така че можеш да направиш и направо така:
[js]var element = $(el).find('img');
element.toggleClass('rotate');[/js]

Още по-добре ще е ако сложиш id на img елемента, а на самия бутон (.btn-rotate) сложиш data-target="id-то на снимката която ще се върти с този бутон". После само си слагаш 1 listener на всички бутони:
[js]$('.btn-rotate').click(function () {
$('#'+$(this).data('target')).toggleClass('rotate');
});[/js]
 
Не ми се получи отново:

html,php:
Код:
                    <div data-storage="locale" data-id="<?= $img['image']; ?>" data-pk="<?= $img['image_id']; ?>" class="image-item lot-photo-block">
                        <div class="lot-photo-inner">
                            <div class="lot-photo-wrp">
                                <img src="<?= $file; ?>" class="normalx" alt="">
                            </div>
                            <a href="#" class="del-lot-photo btn-remove"></a>
                            <a href="#"  data-target="<?= $img['image']; ?>" class="rotate-lot-photo btn-rotate"></a>
                        </div>
                    </div>

<script id="item-image" type="text/x-jquery-tmpl">
    <div data-storage="${storage}" data-id="${id}" class="image-item lot-photo-block">
        <div class="lot-photo-inner">
            <div class="lot-photo-wrp">
                <img src="${img.src}" class="normalx" alt="">
            </div>
            <a href="#" class="del-lot-photo btn-remove"></a>
            <a href="#" data-target="${id}" class="rotate-lot-photo btn-rotate"></a>
        </div>
    </div>
</script>



[js](function ($) {
var defaults = {
csrfToken: null,
csrfTokenName: null,
uploadUrl: '',
deleteUrl: '',
arrangeUrl: '',
mainPhotoText: '',
additionalPhotoText: '',
photos: []
};

function imageUploader(el, options) {
var settings = $.extend({}, defaults, options);
var $main = $(el);
var $identifier = $('input[name="identifier"]', $main).val();
var $images = $('.image-container');
var csrfParams = settings.csrfToken ? '&' + settings.csrfTokenName + '=' + settings.csrfToken : '';
var $loader = $('.loader-progresbar-wrp', $main);

function updateAction() {
size = $('.image-container .image-item').size();
if (size > 1) {
$('#image-upload-block .add-photo-top').html('<p>'+ settings.mainPhotoText +'</p><p>'+ settings.additionalPhotoText +'</p>');
} else {
$('#image-upload-block .add-photo-top').html('<p>'+ settings.mainPhotoText +'</p>');
}
}

function addPhoto(resp) {
var data = {
'img': {'src': resp.data.file},
'id': resp.data.name,
'storage': 'tmp',
'size': resp.data.size
};
var $item = $('#item-image').tmpl(data);

$images.append($item);
updateAction();

return $item;
}

function deletePhoto(el) {
var photo = $(el).parents('.image-item');
var id = photo.data('id');
var pk = photo.data('pk');
var storage = photo.data('storage');
var model = $('input[name="model"]').val();

var data = {
'id': id,
'pk': pk,
'storage': storage,
'model': model,
'identifier': $identifier
};
if (settings.csrfToken)
data[settings.csrfTokenName] = settings.csrfToken;

$.ajax({
type: 'POST',
dataType: 'json',
url: settings.deleteUrl,
data: data,
success: function (data) {
if (data.response.status == 'success') {
photo.remove();
$('input[name="sort[' + (pk ? pk : id) + ']"]', '.sorted-container').remove();
} else {
/*alert(data.response.status);*/
}
}
});
updateAction();
}
function update() {
$('.sorted-container').empty();
$($images).find('.image-item').each(function (i, val) {
var id = $(val).data('id');
var pk = $(val).data('pk');
$('.sorted-container').append('<input type="hidden" name="sort[' + (pk ? pk : id) + ']" value="' + i + '">');
});
}

function multiUploadIE() {

$($loader).find('.loader-progresbar').css({'width': '0%'});
$loader.show();
$($loader).find('.loader-progresbar').css({'width': '50%'});

var ids = [];

$.ajax({
type: 'POST',
url: settings.uploadUrl,
data: $(':input', '#form-create-lot').add(':not:)file)').serializeArray(),
files: $(":file", '#form-create-lot'),
iframe: true,
processData: false,
dataType: "json"
}).complete(function (resp) {
if (resp.status == 200) {
var resp = JSON.parse(resp.responseText);
if (resp.response.status == 'success') {
addPhoto(resp.response);
update();
} else {
$.each(resp.response.data.file, function (i, e) {
alert(e);
});
}

$($loader).find('.loader-progresbar').css({'width': '100%'});
} else {
alert("Error");
}
$loader.hide();
});
return false;
}

function multiUpload(files) {

var uploadFileName = $('.file', $main).attr('name');

var filesCount = files.length;
var uploadedCount = 0;
var ids = [];
for (var i = 0; i < filesCount; i++) {

$($loader).find('.loader-progresbar').css({'width': '1%'});
$loader.show();

var fd = new FormData();
fd.append(uploadFileName, files);
fd.append('identifier', $identifier);

if (settings.csrfToken) {
fd.append(settings.csrfTokenName, settings.csrfToken);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', settings.uploadUrl, true);
xhr.onload = function () {
uploadedCount++;
if (this.status == 200) {
var resp = JSON.parse(this.response);
if (resp.response.status == 'success') {
addPhoto(resp.response);
update();
} else {
$.each(resp.response.data.file, function (i, e) {
alert(e);
});
}
} else {
alert("Error");
}
$loader.hide();

};

xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
$($loader).find('.loader-progresbar').css({'width': (e.loaded / e.total) * 100});
}
};

xhr.send(fd);
}
return false;
}

$('.file', $main).attr('multiple', 'true').on('change', function (e) {


if (!window.FormData) {
multiUploadIE();
} else {
multiUpload(this.files);
}

});

$($images).sortable({
stop: function () {
update();
},
cancel: '.add-photo',
forcePlaceholderSize: true,
placeholder: 'lot-plaseholder'
}).disableSelection();

$('#image-upload-block').on('click', 'a.btn-remove', function () {

deletePhoto($(this));
return false;
});
}
$('.btn-rotate').click(function () {
$('#'+$(this).data('target')).toggleClass('rotate');
});
$.fn.imageUploader = function (options) {
if (this.length) {
this.each(function () {
imageUploader(this, options);
});
}
};

})(jQuery);


[/js]
 
Отново не се получава, по-странното е че не дава и грешка в конзолата.

Единствено когато се натисне бутона се добавя хаштаг/диес (#) в адрес бара. Нищо друго.

6901.png


Дори след изтриване на кеш и т.н. (стандартните процедури) резултата е никакъв.

Всъщност при "прикачване" на снимката/елемента html резултата се превръща и изглежда така:

HTML:
<div class="lot-photo-block-wrp image-container ui-sortable" style="cursor: pointer">
<div data-storage="tmp" data-id="b3fc69318d6ee59ce5d96f1b078eafa5.png" class="image-item lot-photo-block">
<div class="lot-photo-inner">
<div class="lot-photo-wrp">
<img id="b3fc69318d6ee59ce5d96f1b078eafa5.png" src="/tmp/thumbs/b3fc69318d6ee59ce5d96f1b078eafa5.png" class="normalx" alt="">
</div> 
<a href="#" class="del-lot-photo btn-remove"></a>
<a href="#" data-target="b3fc69318d6ee59ce5d96f1b078eafa5.png" class="rotate-lot-photo btn-rotate"></a>
</div>
</div>
</div>
 
Ако бутона го няма в DOM при зареждане на страницата, а се добавя в последствие - тогава това няма да работи:
[js]$('.btn-rotate').click(function () {
$('#'+$(this).data('target')).toggleClass('rotate');
});[/js]
защото при зареждане на страницата още няма за какво да се закачи. Можеш да го закачиш на който и да е parent на бутона, който съдържа и всички останали бутони и съществува при зареждането на страницата. Или по-глобалното решение:
[js]$(document).on('click', '.btn-rotate', function () {
$('#'+$(this).data('target')).toggleClass('rotate');
});[/js]
 
Дори й глобално прикачената снимка не се завърта..явно няма да се получат нещата.
 
Отговорих ти на ЛС, няма как да не се получат нещата. Най-важното умение при работа с javascript е дебъгването :D
 
+1

Остава да поработя по въпроса, когато се натисне бутона за качване на снимката, да се прикачи така както съм е настройл. Тъй като към момента се прикачва в първа "фаза" , вместо да бъде завъртяна.
 
Само да уточним нелепия проблем
Понеже id-то на img елемента е b3fc69318d6ee59ce5d96f1b078eafa5.png, селекторът става #b3fc69318d6ee59ce5d96f1b078eafa5.png и всъщност търси елемент с id b3fc69318d6ee59ce5d96f1b078eafa5 и клас png.
Решението беше селектор за атрибут:
[id="b3fc69318d6ee59ce5d96f1b078eafa5.png"]
 

Горе