Подргрузка контента с другой страницы с затуханием

[bigformat]

Добрый день. С JavaScript пока еще на вы...самому пока не разобраться - может кто подскажет?

Есть 2 скрипта: 1-й - подгружает контент с другой страницы из дива без перезагрузки страницы, 2-й скрипт позволяет выводить контент в блоке с затуханием,но при этом, берет сам контент из дивов, которые расположены на этой же странице(что не очень удобно, т.к. планируется создание фотоальбома, страницы с видеозаписями, и пр.)

По отдельности и тот и другой работают отлично!

Вопрос - реально ли без углубленного изучения javascript и особого редактирования кодов этих скриптов, совместить 2 этих скрипта в единое целое? - в идеале контент должен подгружаться с другой страницы(этого же сайта), но при подргузке должен быть эффект с затуханием(сменой прозрачности).
Скрипт 2(Затухание):

<script type="text/javascript">
 $(function(){
 $("#about-button").css({
 opacity: 0.3
 });
 $("#contact-button").css({
 opacity: 0.3
 });
 $("#page-wrap div.button").click(function(){
 $clicked = $(this);
 if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
 $clicked.animate({
 opacity: 1,
 borderWidth: 5
 }, 600 );
 var idToLoad = $clicked.attr("id").split('-');
 $("#content1").find("div:visible").fadeOut("fast", function(){
 $(this).parent().find("#"+idToLoad[0]).fadeIn();
 })
 }
 $clicked.siblings(".button").animate({
 opacity: 0.5,
 borderWidth: 1
 }, 600 );
 });
 });
 </script>

Реализация на странице:

<div id="page-wrap">
  <div id="home-button" class="button" >
Первая страница
 </div>
 <div id="about-button" class="button">
 Вервая страница
 </div>
 <div id="contact-button" class="button">
 Третья страница
 </div>
 
 <div class="clear"></div>
 
 <div id="content1">
 
 <div id="home">123</div>
 <div id="about">456</div>
 <div id="contact">789</div>
 </div>
 </div>

Скрипт 1(Подругзка контента с других страниц сайта):

<script type="text/javascript">
;(function($) {
 $.lebnikLoad = function(selector, url, callback){ $(document.body).lebnikLoad(selector, url, callback, true); };
 $.fn.lebnikLoad = function(selector, url, callback, without_selector_document){
 var selector_document = this;
 var e = $('<iframe style="display:none" src="'+url+'"></iframe>');
 $(document.body).append( e );
 $(e).load(function(){
 var x = $(selector, e[0].contentWindow.document);
 if(callback){
 callback(x);
 }else if(without_selector_document != true){
 $(selector_document).html( $(x).html() );
 }
 });
 };
})(jQuery);
</script>

последний активируется свойством

onclick="$('#this_tag').html('подгружаю данные...').lebnikLoad('#content_from', 'http://www.mysite.ru/0-7/'); return false;"

, где this_tag - див с контентом на данной странице, а content_from - див, из которого подгружается контент

В целом, получилось - только вот одно - как заставить первый скрипт брать контент не из разных дивов с той же страницы, а подружать с одного и того же, но с разных страниц?

[dmitriymar]

Вопрос - реально ли без углубленного изучения javascript и особого редактирования кодов этих скриптов, совместить 2 этих скрипта в единое целое?

без изучения возможно только в разделе Работа

[bigformat]

без изучения возможно только в разделе Работа

Читайте внимательнее - я написал без углубленного - и тем более я спросил возможно ли? На этот вопрос подразумевается 2 ответа - возможно или нет. ..так что ваш ответ, в целом, не по теме вопроса...

[danik.js]

Твои скрипты - хлам. Вот простой код подгрузки и плавного появления контента:

var loadingMessage = 'подгружаю данные...';
var url = 'http://www.mysite.ru/0-7/ #content_from';

$('#this_tag').html(loadingMessage).load(url, function() {
    $(this).hide().fadeIn();
});

Че там у тебя с кнопками должно происходить я не понял.

[bigformat]

var loadingMessage = 'подгружаю данные...';
var url = 'http://www.mysite.ru/0-7/ #content_from';

$('#this_tag').html(loadingMessage).load(url, function() {
    $(this).hide().fadeIn();
});

На кнопки пофиг - главное контент! Огромнейшее спасибо!

[danik.js]

<div id="this_tag">
    Тут типа какой-нибудь контент...
</div>
<button id="load_button">Подгрузить другой контент!</button>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    var loadingMessage = 'подгружаю данные...';
    var url = 'http://www.mysite.ru/0-7/ #content_from';

    function loadContent() {
        $('#this_tag').html(loadingMessage).load(url, function() {
            $(this).hide().fadeIn('slow');
        });
    }

    // по клику будем грузить контент
    $('#load_button').click(loadContent);
    
    // это чисто для симуляции подгрузки
    $.fn.load = function(url, callback) {
        var node = this;
        setTimeout(function(){
            $(node).html('Это типа контент со страницы ' + url);
            callback.call(node);
        }, 1000);
    }
</script>

[bigformat]

еще раз спасибо - разобрался - а есть ли возможность добавить несколько переменных с урл-ами? - в том плане, что будет несколько кнопок(типа меню) и подгружающийся контент

[danik.js]

<div id="home-button" class="button" data-page="home">
Первая страница
</div>
<div id="about-button" class="button" data-page="about">
Вервая страница
</div>
<div id="contact-button" class="button" data-page="contact">
<script>
    var baseUrl = '/mypages/';
    function loadPage(page) {
        // тут в page будет алиас страницы: home | about | contact
        var url = baseUrl + page + '.html'; // получаем урл типа /mypages/about.html
        $('#content').load(url)/*...*/;
    }

    $('.button').click(function(){
        loadPage($(this).data('page'));
    })
</script>

[bigformat]

все четко и ясно! спасибо еще раз!