Показать сообщение отдельно
  #1 (permalink)  
Старый 27.06.2013, 15:49
Новичок на форуме
Отправить личное сообщение для bigformat Посмотреть профиль Найти все сообщения от bigformat
 
Регистрация: 09.02.2013
Сообщений: 8

Подргрузка контента с другой страницы с затуханием
Добрый день. С 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 - див, из которого подгружается контент

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

Последний раз редактировалось bigformat, 27.06.2013 в 15:59.
Ответить с цитированием