Сообщений в теме: 4

[Argentum-dv]

Я дико извиняюсь, но третий день бьюсь с проблемой. Я не очень со скриптами но очень нужно.
В вашем шаблоне в файле скриптов (template.js) я никак не могу правильно запустить следующую конструкцию, которая на тестовой страничке прекрасно отрабатывает.

$("#123").load(function () {
$(".rounded-img").wrap(function () {  // rounded-img сласс нужной картинки
//alert ($(this).attr('src')); // не отрабатывает если завернуто в .load
var img_h = $(this).height();
var img_w = $(this).width();
});

Во первых категорически отказывается работать .load
во вторых ежели просто запустить 

$(".rounded-img").wrap(function () {
alert ($(this).attr('src'));
var img_h = $(this).height();
var img_w = $(this).width();

оно работает, но все значения размеров картинки нулевые. Хотя картинка есть. 
Весь мой код есессно внутри вашей if (typeof jQuery != "undefined") jQuery(function ($) {} и я так понимаю он исполняется когда дерево DOM построено и картинки подгружены.
Собсно вопрос. Почему категорически не работает .load (хотя ошибок не выдает) просто не исполняется и как мне внутри вашего скрипта получить размер картинки контента.

 

Очень жду помощи, спасибо.

[Argentum-dv]

Ну хоть подскажите куда двигаться?

[SmetDenis]

Добрый день,
 
А у вас есть ссылка на сайт или приложите полный JS-файл.
Зачем вам отслеживать load контейнера?
Может стоить использовать onLoad у body ?

[Argentum-dv]

весь js файл

// check and define $ as jQuery
if (typeof jQuery != "undefined") jQuery(function ($) {
    // dump(myVar); is wrapper for console.log() with check existing console object and show 
    window.dump = function (vars, name, showTrace) {
        if (typeof console == "undefined") return false;
        if (typeof vars == "string" || typeof vars == "array") var type = " (" + typeof vars + ", " + vars.length + ")";
        else var type = " (" + typeof vars + ")";
        if (typeof vars == "string") vars = '"' + vars + '"';
        if (typeof name == "undefined") name = "..." + type + " = ";
        else name += type + " = ";
        if (typeof showTrace == "undefined") showTrace = false;
        console.log(name, vars);
        if (showTrace) console.trace();
        return true
    };

    // remove no-js class if JavaScript enabled
    $('html.no-js').removeClass('no-js').addClass('js-ready');

    // close Joomla system messages (just example)
    $('#system-message .close').click(function () {
        $(this).closest('.alert').animate({
            height: 0,
            opacity: 0,
            MarginBottom: 0
        }, 'slow', function () {
            $(this).remove();
        });
        return false;
    });



    // your JavaScript and jQuery code here
  
 //function funonload() {  и onload="funonload();" в body также не работает
   (document).ready ( function(){
        $(".rounded-img").wrap(function () {   // rounded-img класс нужной мне картинки (размер допустим 75*100)
                alert ($(this).attr('src'));
            var img_h = $(this).height();
            var img_w = $(this).width();
            var block_size = 0;

            if (img_h >= img_w) {
                block_size = img_w;
            } else {
                block_size = img_h;
            }
       $(".wrap").css("width", block_size);
       $(".wrap").css("height", block_size);
            var img_margin_top = (img_h - block_size) / 2;
            var img_margin_left = (img_w - block_size) / 2;
            return '<span class="' + $(this).attr('class') + '" style="background:url(..' + $(this).attr('src') + ') no-repeat center center; width: ' + img_w + 'px; height: ' + img_h + 'px; margin-top: -' + img_margin_top + 'px; ;" />';
        });
        $(this).css("opacity", "0");
   });
});

На странице есть картинка с классом .rounded-img с которой мне нужно произвести манипуляции.

 

через onload="funonload();" в body также не работает.

[Argentum-dv]

Решил свою задачу, не без вашей помощи.

Рабочая конструкция выглядит так.

    function funonload() {
        $(".rounded-img").wrap(function () {
               
            var img_h = $(this).height();
            var img_w = $(this).width();
            var block_size = 0;

            if (img_h >= img_w) {
                block_size = img_w;
            } else {
                block_size = img_h;
            }
       $(".slogin-avatar").css("width", block_size);
       $(".slogin-avatar").css("height", block_size);
            var img_margin_top = (img_h - block_size) / 2;
            var img_margin_left = (img_w - block_size) / 2;
            return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + img_w + 'px; height: ' + img_h + 'px; margin-top: -' + img_margin_top + 'px; ;" />';
        });
        $(this).css("opacity", "0");
   };
    window.onload = funonload;

Была ещё одна проблема, о которой раньше не подозревал и постиг методом проб и ошибок.

Я пытался  получить размеры картинки, которая была в блоке с параметром display:none

Не думал что это проблема. Пришлось блок не скрывать а переместить в невидимую часть экрана. тогда всё заработало.