Последовательность выполнения скрипта
Здравствуйте! Нужен скрипт, который вначале перемещает картинку в корзину, а после открывается модальное окно. Но модальное окно открывается сразу, а должно в конце. Как заставить его срабатывать в конце?
<div class="productPriceWrapRight"> <a class="modalbox" href="#inline" onClick="return false;"> <img src="images/add-to-basket2.gif" alt="Add To Basket" width="111" height="32" id="featuredProduct_1" /> </a> </div> <div id="inline"> <h2>Отправка сообщения</h2> <form id="contact" name="contact" action="#" method="post"> <label for="email">Ваш E-mail</label> <input type="email" id="email" name="email" class="txt"> <br> <label for="msg">Введите сообщение</label> <textarea id="msg" name="msg" class="txtarea"></textarea> <button id="send">Отправить E-mail</button> </form> </div> $(document).ready(function(){
...здесь обеспечивается полёт картинки...
$(".modalbox").fancybox({ }); - модальное окно, которое должно сработать в конце.
});
|
если картинка летит по средствам animate то
.animate({ ... }, 5000, function() { $(".modalbox").fancybox({ }); // Animation complete. }); |
В общем приведу весь код с исправлением (жирным выделил), но всё-равно окно выскакивает сразу.
$(document).ready(function(){
$("#basketItemsWrap li:first").hide();
$(".productPriceWrapRight a img").click(function() {
var productIDValSplitter = (this.id).split("_");
var productIDVal = productIDValSplitter[1];
var productX = $("#productImageWrapID_" + productIDVal).offset().left;
var productY = $("#productImageWrapID_" + productIDVal).offset().top;
if( $("#productID_" + productIDVal).length > 0){
var basketX = $("#productID_" + productIDVal).offset().left;
var basketY = $("#productID_" + productIDVal).offset().top;
} else {
var basketX = $("#basketTitleWrap").offset().left;
var basketY = $("#basketTitleWrap").offset().top;
}
var gotoX = basketX - productX;
var gotoY = basketY - productY;
var newImageWidth = $("#productImageWrapID_" + productIDVal).width() / 3;
var newImageHeight = $("#productImageWrapID_" + productIDVal).height() / 3;
$("#productImageWrapID_" + productIDVal + " img")
.clone()
.prependTo("#productImageWrapID_" + productIDVal)
.css({'position' : 'absolute'})
.animate({opacity: 0.4}, 100 )
.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200 , function() { $(this).remove();
$("#notificationsLoader").html('<img src="images/loader.gif">');
$.ajax({
type: "POST",
url: "inc/functions.php",
data: { productID: productIDVal, action: "addToBasket"},
success: function(theResponse) {
if( $("#productID_" + productIDVal).length > 0){
$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
$("#productID_" + productIDVal).before(theResponse).remove();
$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
$("#notificationsLoader").empty();
} else {
$("#basketItemsWrap li:first").before(theResponse);
$("#basketItemsWrap li:first").hide();
$("#basketItemsWrap li:first").show("slow");
$("#notificationsLoader").empty();
}
}
});
$(".modalbox").fancybox();
});
});
$("#basketItemsWrap li img").live("click", function(event) {
var productIDValSplitter = (this.id).split("_");
var productIDVal = productIDValSplitter[1];
$("#notificationsLoader").html('<img src="images/loader.gif">');
$.ajax({
type: "POST",
url: "inc/functions.php",
data: { productID: productIDVal, action: "deleteFromBasket"},
success: function(theResponse) {
$("#productID_" + productIDVal).hide("slow", function() {$(this).remove();});
$("#notificationsLoader").empty();
}
});
});
});
|
Подскажите пожалуйста, как выражение href="#inline" реализовать программно с помощью javascript чтобы вставить его в нужное место в скрипте и вызвать div-блок c индетификатором id="inline"
|
Нефигасебе код. Он не влез на 1920 разрешение. :nono:
|
Цитата:
|
kostant, ты страницу верни как было! Из-за твоего жирного кода страницу расперло. (32ю строку почисти от пробелов)
|
Друзья, помогите пожалуйста! В общем пытаюсь запустить ф-цию предварительно (как написано в документации), но всё равно 2 действия запускаются одновременно:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
'beforeShow': $(".productPriceWrapRight a img").bind('click',kos_fly),
'href': '#inline1'
});
});
</script>
'beforeShow': $(".productPriceWrapRight a img").bind('click',kos_fly), в этой строчке, я так понимаю, нельзя использовать метод bind и связывать событие click с моей функцией kos_fly. Мне то всего нужно передать этой ф-ции id селектора ".productPriceWrapRight a img" в момент клика. Вопрос 1: как в качестве параметра функции передать id в момент клика? Ещё есть 2 вариант. Привожу код: $(function (){
$(".productPriceWrapRight a img")
.bind('click',kos_fly)
.bind('click',function(event) {
// Функция вызова модального окна
$.fancybox( {'href': '#inline1', title : 'Текст посылаемый'} );
});
});
Но всё-равно 2 этих навешенных действия выполняются одновременно, а не друг за другом. Вопрос 2: как задать последовательную очерёдность? Код ф-ции kos_fly: function kos_fly (event) {
var productIDValSplitter = (this.id).split("_");
var productIDVal = productIDValSplitter[1];
var productX = $("#productImageWrapID_" + productIDVal).offset().left;
var productY = $("#productImageWrapID_" + productIDVal).offset().top;
if( $("#productID_" + productIDVal).length > 0){
var basketX = $("#productID_" + productIDVal).offset().left;
var basketY = $("#productID_" + productIDVal).offset().top;
} else {
var basketX = $("#basketTitleWrap").offset().left;
var basketY = $("#basketTitleWrap").offset().top;
}
var gotoX = basketX - productX;
var gotoY = basketY - productY;
var newImageWidth = $("#productImageWrapID_" + productIDVal).width() / 3;
var newImageHeight = $("#productImageWrapID_" + productIDVal).height() / 3;
$("#productImageWrapID_" + productIDVal + " img")
.clone()
.prependTo("#productImageWrapID_" + productIDVal)
.css({'position' : 'absolute'})
.animate({opacity: 0.4}, 100 )
.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() {
$(this).remove();
$("#notificationsLoader").html('<img src="http://www.cyberforum.ru/images/loader.gif">');
$.ajax({
type: "POST",
url: "inc/functions.php",
data: { productID: productIDVal, action: "addToBasket"},
success: function(theResponse) {
if( $("#productID_" + productIDVal).length > 0){
$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
$("#productID_" + productIDVal).before(theResponse).remove();
$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
$("#notificationsLoader").empty();
} else {
$("#basketItemsWrap li:first").before(theResponse);
$("#basketItemsWrap li:first").hide();
$("#basketItemsWrap li:first").show("slow");
$("#notificationsLoader").empty();
}
}
});
});
}
|
В общем получилось с помощью задержки сделать нужную последовательность:
// Функция вызова модального окна
setTimeout( function () {
$.fancybox.open( {'href': '#inline1', title : ''} );
}, 1000
);
|
| Часовой пояс GMT +3, время: 11:50. |