aliarian
چهارشنبه 13 آذر 1392, 13:26 عصر
من یه قالب html دارم و میخوام به دیتالایف تبدیلش کنم. ولی یه شمکل داره و اون اینکه سایت برای شروع یک فایل html رو رفراخوانی میکنه و وقتی دستورشو حذف میکنم قالب اجرا نمیشه
کد مربوطه:
//Main configuration
var hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
var menuVisible = true;
var windowHeight = document.documentElement.clientHeight;
var windowWidth = document.documentElement.clientWidth;
var pageHash = window.location.hash;
var anchorage;
var previousMenuDimensions;
var isAsgard = true;
var playlistInterval = 6000;
var homePage = "masonry-portfolio";
var pageType = ".html";
var animationLength = 400;
var videoHeight = 360;
var videoWidth = 640;
var hoverColor = "9c0606";
$(window).load(function(){
//start the intro
intro();
});
$(window).resize(function() {
//responsiveness
responsive();
//readjust gallery, simple portfolio images - performance hit on resize :-(
//autoImageAdjust();
});
//load hash selected - home page instead
function loadHash(){
pageHash = window.location.hash;
//if there's a hash, load the appropriate page
if (pageHash.length > 1) {
anchorage = pageHash.split("#")[1]+pageType;
loadContents(anchorage);
}
else
loadContents(homePage+pageType);
}
//custom inner page animations
function animatePage(divId, direction){
var direction = direction;
//hide the div provided
if(divId){
var divId = $("#"+divId);
divId.css("opacity","0");
}
//animate opacity and direction according to the one given
switch(direction){
case "gallery":
var counter = 0;
var delayPar = 100;
var nElements = parseInt($(".masonryImage, .simpleImage, .galleryImage").length);
$(".masonryImage, .simpleImage, .galleryImage").each(function(){
$(this).css({"opacity":"0", "margin-left":"-80px"});
$(this).stop().delay(animationLength+100*counter). animate({"opacity": "1", "margin-left":"0px"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){$(this).css({"margin-left":"", "opacity":""});}});
counter++;
if(nElements == counter)
setTimeout(function(){
//animate images
animateImages();
}, 1000);
});
break;
case "all":
var counter = 0;
divId.delay(800).animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad"});
divId.find("div *:not(div, li, li a, td)").each(function(){
//don't touch absolutely positioned elements
if($(this).css("position") != "absolute"){
$(this).css({"position":"relative", "top":"-40px", "opacity":"0"});
//animate in and then reset attributes
$(this).delay(animationLength+(counter*100)).anima te({"top":"0px", "opacity":"1"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){$(this).css({"top":"", "opacity":""});}});
counter++;
}
});
break;
case "half":
divId.children("div.half-column").css({"position":"relative", "top":"-80px"});
divId.children("div.half-column.last").css({"position":"relative", "top":"80px"});
divId.delay(800).animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad"});
divId.children("div.half-column").delay(800).animate({"top":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
divId.children("div.half-column.last").delay(800).animate({"top":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "top":
divId.css({"position":"relative", "top":"-80px"});
divId.delay(800).animate({"opacity":"1", "top":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "left":
divId.css({"position":"relative", "left":"-80px"});
divId.delay(800).animate({"opacity":"1", "left":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "right":
divId.css({"position":"relative", "right":"-80px"});
divId.delay(800).animate({"opacity":"1", "right":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "bottom":
divId.css({"position":"relative", "bottom":"-80px"});
divId.delay(800).animate({"opacity":"1", "bottom":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "opacity":
divId.css({"opacity":"0"});
divId.delay(800).animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad"});
break;
default:
divId.css({"position":"relative", "top":"-80px"});
divId.delay(800).animate({"opacity":"1", "top":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
}
}
//function that handles the portfolio items when clicked - popup, etc
function portfolioClicked(){
//if play button is pressed
var playlistOn = false;
var playlist;
$(".masonryImage, .simpleImage").on("click", function(evt){
evt.preventDefault();
evt.stopPropagation();
showItem($(this));
});
function showItem(thiss){
var thisDescription = thiss.children("span.description");
var thisParagraph = thiss.children("p");
var thisItem = thiss.children("img.item");
var descriptionWrapper = $("#onclickDescriptionWrapper div");
$("#onclickWrapper").css("display","block");
//if item is video, add it
if(thisItem.hasClass("video")){
//clone the item clicked on the itemwrapper
$("#onclickItemWrapper").html("<iframe class='item' src='"+thisItem.attr("alt")+"' frameborder='0' allowfullscreen></iframe>");
}
else{
//clone the item clicked on the itemwrapper
$("#onclickItemWrapper").html(thisItem.clone());
}
var newitem = $("#onclickItemWrapper .item");
//remove previous junk attached
newitem.removeAttr("style class");
//append the appropriate description, paragraph and buttons
descriptionWrapper.append("<h2>"+thisDescription.html()+"</h2>");
descriptionWrapper.append(thisParagraph.clone());
descriptionWrapper.append("<div id='onclickButtons'><div class='previousButton'></div><div class='playButton'></div><div class='nextButton'></div><div class='closeButton'></div></div>");
//adjust inner wrapper width and height
if(document.documentElement.clientWidth <= 960)
$("#onclickItemWrapper").css({"height":document.documentElement.clientHeight-$("#onclickDescriptionWrapper").height()+"px", "width":"100%", "top":$("#onclickDescriptionWrapper").height()-40+"px"});
else
$("#onclickItemWrapper").css({"width":document.documentElement.clientWidth-$("#onclickDescriptionWrapper").width()+"px", "height":"100%"});
//if item is not a video, adjust the width and height
if(thisItem.hasClass("video")){
newitem.css({"width":videoWidth+"px", "height":videoHeight+"px"});
}
else{
//extract full-image from thumbnail
var newitemSrc = newitem.attr("src").split("/thumbnails/");
newitem.attr("src", newitemSrc[0]+"/full-images/"+newitemSrc[1]);
//if width>height, adjust to 80% width
if(newitem.width() > newitem.height()){
newitem.css({"width":"80%", "height":"auto"});
if(newitem.height() >= 0.8 * windowHeight)
newitem.css({"height":"80%", "width":"auto"});
}
}
//align vertically and horizontally
newitem.css({"margin-top":"-"+newitem.height()/2+"px", "margin-left":"-"+newitem.width()/2+"px"});
$("#onclickWrapper").animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
//get top positions
var itemTop = $("#onclickItemWrapper").css("top").split("px");
var descriptionTop = $("#onclickDescriptionWrapper").css("top").split("px");
//animate them in
$("#onclickItemWrapper").animate({"opacity":"1", "top":parseInt(itemTop[0])+40+"px"},{duration:animationLength, easing:"easeInOutQuad"});
$("#onclickDescriptionWrapper").animate({"opacity":"1", "top":parseInt(descriptionTop[0])-40+"px"}, {duration:animationLength, easing:"easeInOutQuad"});
if(playlistOn){
//change icon
$(".playButton").css("background-image","url(images/pause.png)");
//disable the other buttons
$(".closeButton, .nextButton, .previousButton").addClass("disabledButton");
}
//animate buttons and other elements on hover
animateOnHover();
//add remove listener for the close button
$(".closeButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
}
});
//add listener for the next button
$(".nextButton, #onclickItemWrapper img").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
setTimeout(function(){
//if there's no next item, skip to the very first one
if(thiss.next(".masonryImage, .simpleImage").length == 0)
showItem($(".masonryImage, .simpleImage").first());
else
showItem(thiss.next(".masonryImage, .simpleImage"));
}, 1000);
}
});
//add listener for the previous button
$(".previousButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
setTimeout(function(){
//if there's no previous item, skip to the very last one
if(thiss.prev(".masonryImage, .simpleImage").length == 0)
showItem($(".masonryImage, .simpleImage").last());
else
showItem(thiss.prev(".masonryImage, .simpleImage"));
}, 1000);
}
});
//add listener for the play button
$(".playButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
//disable the other buttons
$(".closeButton, .nextButton, .previousButton").addClass("disabledButton");
playlist = setInterval(function(){
removeItem();
setTimeout(function(){
//if there's no previous item, skip to the very last one
if(thiss.next(".masonryImage, .simpleImage").length == 0)
showItem($(".masonryImage, .simpleImage").first());
else
showItem(thiss.next(".masonryImage, .simpleImage"));
thiss = thiss.next(".masonryImage, .simpleImage");
}, 1000);
}, playlistInterval);
//change icon
$(this).css("background-image","url(images/pause.png)");
playlistOn = true;
}
else{
//enable the other buttons
$(".closeButton, .nextButton, .previousButton").removeClass("disabledButton");
clearInterval(playlist);
//change icon
$(this).css("background-image","url(images/video.png)");
playlistOn = false;
}
});
}});
}
function removeItem(){
//get top positions
var itemTop = $("#onclickItemWrapper").css("top").split("px");
var descriptionTop = $("#onclickDescriptionWrapper").css("top").split("px");
$("#onclickItemWrapper").animate({"opacity":"0", "top":parseInt(itemTop[0])-40+"px"},{duration:animationLength, easing:"easeInOutQuad"});
$("#onclickDescriptionWrapper").animate({"opacity":"0", "top":parseInt(descriptionTop[0])+40+"px"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
$("#onclickWrapper").animate({"opacity":"0"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
$("#onclickWrapper").css("display","none");
$("#onclickDescriptionWrapper div").empty();
$("#onclickItemWrapper").empty();
//reset top and other values
$("#onclickItemWrapper").removeAttr("style");
$("#onclickDescriptionWrapper").removeAttr("style");
}});
}});
}
}
//function that handles the gallery items when clicked - popup, etc
function galleryClicked(){
//if play button is pressed
var playlistOn = false;
var playlist;
$(".galleryImage").on("click", function(evt){
evt.preventDefault();
evt.stopPropagation();
showItem($(this));
});
function showItem(thiss){
var thisItem = thiss.children("img.item");
var onClickWrapper = $("#onclickWrapper");
var thisDescription = thiss.children("span.description");
var gallerySize = $(".galleryImage").length;
var itemPosition = $(".galleryImage").index(thiss) + 1;
onClickWrapper.css("display","block");
//clone the item clicked on the itemwrapper
$("#onclickItemWrapper").html(thisItem.clone());
var newitem = $("#onclickItemWrapper .item");
//remove previous junk attached
newitem.removeAttr("style class");
//adjust inner wrapper width and height
if(document.documentElement.clientWidth <= 960)
$("#onclickItemWrapper").css({"height":document.documentElement.clientHeight+"px", "width":"100%", "top":$("#onclickDescriptionWrapper").height()-40+"px"});
else
$("#onclickItemWrapper").css({"width":document.documentElement.clientWidth+"px", "height":"100%"});
//if width>height, adjust to 80% width
if(newitem.width() > newitem.height()){
newitem.css({"width":"80%", "height":"auto"});
if(newitem.height() >= 0.8 * windowHeight)
newitem.css({"height":"80%", "width":"auto"});
}
//align vertically and horizontally
newitem.css({"margin-top":"-"+newitem.height()/2+"px", "margin-left":"-"+newitem.width()/2+"px"});
//add description, controls and count
onClickWrapper.append("<span class='itemDescription'>"+thisDescription.html()+"</span>");
onClickWrapper.append("<a class='button disabledButton itemCount'>"+itemPosition+" / "+gallerySize+"</a>");
onClickWrapper.append("<div class='previousButton'></div></div><div class='nextButton'></div><div class='closeButton'></div>");
onClickWrapper.animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
//get top positions
var itemTop = $("#onclickItemWrapper").css("top").split("px");
//animate them in
$("span.itemDescription").animate({"opacity":"1", "bottom":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
$("#onclickItemWrapper").animate({"opacity":"1", "top":parseInt(itemTop[0])+40+"px"},{duration:animationLength, easing:"easeInOutQuad"});
if(playlistOn){
//change icon
$(".playButton").css("background-image","url(images/pause.png)");
//disable the other buttons
$(".closeButton, .nextButton, .previousButton").addClass("disabledButton");
}
//animate buttons and other elements on hover
animateOnHover();
//add remove listener for the close button
$(".closeButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
}
});
//add listener for the next button
$(".nextButton, #onclickItemWrapper img").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
setTimeout(function(){
//if there's no next item, skip to the very first one
if(thiss.next(".galleryImage").length == 0)
showItem($(".galleryImage").first());
else
showItem(thiss.next(".galleryImage"));
}, 1000);
}
});
//add listener for the previous button
$(".previousButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
setTimeout(function(){
//if there's no previous item, skip to the very last one
if(thiss.prev(".galleryImage").length == 0)
showItem($(".galleryImage").last());
else
showItem(thiss.prev(".galleryImage"));
}, 1000);
}
});
//add listener for the play button
$(".playButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
//disable the other buttons
$(".closeButton, .nextButton, .previousButton").addClass("disabledButton");
playlist = setInterval(function(){
removeItem();
setTimeout(function(){
//if there's no previous item, skip to the very last one
if(thiss.next(".galleryImage").length == 0)
showItem($(".galleryImage").first());
else
showItem(thiss.next(".galleryImage"));
thiss = thiss.next(".galleryImage");
}, 1000);
}, playlistInterval);
//change icon
$(this).css("background-image","url(images/pause.png)");
playlistOn = true;
}
else{
//enable the other buttons
$(".closeButton, .nextButton, .previousButton").removeClass("disabledButton");
clearInterval(playlist);
//change icon
$(this).css("background-image","url(images/video.png)");
playlistOn = false;
}
});
//extract full-image from thumbnail
var newitemSrc = newitem.attr("src").split("/thumbnails/");
newitem.attr("src", newitemSrc[0]+"/full-images/"+newitemSrc[1]);
}});
}
function removeItem(){
//get top positions
var itemTop = $("#onclickItemWrapper").css("top").split("px");
$("span.itemDescription").animate({"opacity":"0", "bottom":"-40px"},{duration:animationLength, easing:"easeInOutQuad"});
$("#onclickItemWrapper").animate({"opacity":"0", "top":parseInt(itemTop[0])-40+"px"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
$("#onclickWrapper").animate({"opacity":"0"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
$("#onclickWrapper").css("display","none");
$(".nextButton, .previousButton, .closeButton, span.itemDescription, a.itemCount").remove();
$("#onclickItemWrapper").empty();
//reset top and other values
$("#onclickItemWrapper").removeAttr("style");
}});
}});
}
}
همانطور که مشاهده میکنید در همون خطوط اول فایل masonry-portfolio.html فراخوانی میشه.
ممنون میشم بگین چطوری اینو ویرایش کنم. من هرچه ادرس دهی کردم سایت اجرا نشد.
کد مربوطه:
//Main configuration
var hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
var menuVisible = true;
var windowHeight = document.documentElement.clientHeight;
var windowWidth = document.documentElement.clientWidth;
var pageHash = window.location.hash;
var anchorage;
var previousMenuDimensions;
var isAsgard = true;
var playlistInterval = 6000;
var homePage = "masonry-portfolio";
var pageType = ".html";
var animationLength = 400;
var videoHeight = 360;
var videoWidth = 640;
var hoverColor = "9c0606";
$(window).load(function(){
//start the intro
intro();
});
$(window).resize(function() {
//responsiveness
responsive();
//readjust gallery, simple portfolio images - performance hit on resize :-(
//autoImageAdjust();
});
//load hash selected - home page instead
function loadHash(){
pageHash = window.location.hash;
//if there's a hash, load the appropriate page
if (pageHash.length > 1) {
anchorage = pageHash.split("#")[1]+pageType;
loadContents(anchorage);
}
else
loadContents(homePage+pageType);
}
//custom inner page animations
function animatePage(divId, direction){
var direction = direction;
//hide the div provided
if(divId){
var divId = $("#"+divId);
divId.css("opacity","0");
}
//animate opacity and direction according to the one given
switch(direction){
case "gallery":
var counter = 0;
var delayPar = 100;
var nElements = parseInt($(".masonryImage, .simpleImage, .galleryImage").length);
$(".masonryImage, .simpleImage, .galleryImage").each(function(){
$(this).css({"opacity":"0", "margin-left":"-80px"});
$(this).stop().delay(animationLength+100*counter). animate({"opacity": "1", "margin-left":"0px"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){$(this).css({"margin-left":"", "opacity":""});}});
counter++;
if(nElements == counter)
setTimeout(function(){
//animate images
animateImages();
}, 1000);
});
break;
case "all":
var counter = 0;
divId.delay(800).animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad"});
divId.find("div *:not(div, li, li a, td)").each(function(){
//don't touch absolutely positioned elements
if($(this).css("position") != "absolute"){
$(this).css({"position":"relative", "top":"-40px", "opacity":"0"});
//animate in and then reset attributes
$(this).delay(animationLength+(counter*100)).anima te({"top":"0px", "opacity":"1"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){$(this).css({"top":"", "opacity":""});}});
counter++;
}
});
break;
case "half":
divId.children("div.half-column").css({"position":"relative", "top":"-80px"});
divId.children("div.half-column.last").css({"position":"relative", "top":"80px"});
divId.delay(800).animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad"});
divId.children("div.half-column").delay(800).animate({"top":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
divId.children("div.half-column.last").delay(800).animate({"top":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "top":
divId.css({"position":"relative", "top":"-80px"});
divId.delay(800).animate({"opacity":"1", "top":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "left":
divId.css({"position":"relative", "left":"-80px"});
divId.delay(800).animate({"opacity":"1", "left":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "right":
divId.css({"position":"relative", "right":"-80px"});
divId.delay(800).animate({"opacity":"1", "right":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "bottom":
divId.css({"position":"relative", "bottom":"-80px"});
divId.delay(800).animate({"opacity":"1", "bottom":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
case "opacity":
divId.css({"opacity":"0"});
divId.delay(800).animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad"});
break;
default:
divId.css({"position":"relative", "top":"-80px"});
divId.delay(800).animate({"opacity":"1", "top":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
break;
}
}
//function that handles the portfolio items when clicked - popup, etc
function portfolioClicked(){
//if play button is pressed
var playlistOn = false;
var playlist;
$(".masonryImage, .simpleImage").on("click", function(evt){
evt.preventDefault();
evt.stopPropagation();
showItem($(this));
});
function showItem(thiss){
var thisDescription = thiss.children("span.description");
var thisParagraph = thiss.children("p");
var thisItem = thiss.children("img.item");
var descriptionWrapper = $("#onclickDescriptionWrapper div");
$("#onclickWrapper").css("display","block");
//if item is video, add it
if(thisItem.hasClass("video")){
//clone the item clicked on the itemwrapper
$("#onclickItemWrapper").html("<iframe class='item' src='"+thisItem.attr("alt")+"' frameborder='0' allowfullscreen></iframe>");
}
else{
//clone the item clicked on the itemwrapper
$("#onclickItemWrapper").html(thisItem.clone());
}
var newitem = $("#onclickItemWrapper .item");
//remove previous junk attached
newitem.removeAttr("style class");
//append the appropriate description, paragraph and buttons
descriptionWrapper.append("<h2>"+thisDescription.html()+"</h2>");
descriptionWrapper.append(thisParagraph.clone());
descriptionWrapper.append("<div id='onclickButtons'><div class='previousButton'></div><div class='playButton'></div><div class='nextButton'></div><div class='closeButton'></div></div>");
//adjust inner wrapper width and height
if(document.documentElement.clientWidth <= 960)
$("#onclickItemWrapper").css({"height":document.documentElement.clientHeight-$("#onclickDescriptionWrapper").height()+"px", "width":"100%", "top":$("#onclickDescriptionWrapper").height()-40+"px"});
else
$("#onclickItemWrapper").css({"width":document.documentElement.clientWidth-$("#onclickDescriptionWrapper").width()+"px", "height":"100%"});
//if item is not a video, adjust the width and height
if(thisItem.hasClass("video")){
newitem.css({"width":videoWidth+"px", "height":videoHeight+"px"});
}
else{
//extract full-image from thumbnail
var newitemSrc = newitem.attr("src").split("/thumbnails/");
newitem.attr("src", newitemSrc[0]+"/full-images/"+newitemSrc[1]);
//if width>height, adjust to 80% width
if(newitem.width() > newitem.height()){
newitem.css({"width":"80%", "height":"auto"});
if(newitem.height() >= 0.8 * windowHeight)
newitem.css({"height":"80%", "width":"auto"});
}
}
//align vertically and horizontally
newitem.css({"margin-top":"-"+newitem.height()/2+"px", "margin-left":"-"+newitem.width()/2+"px"});
$("#onclickWrapper").animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
//get top positions
var itemTop = $("#onclickItemWrapper").css("top").split("px");
var descriptionTop = $("#onclickDescriptionWrapper").css("top").split("px");
//animate them in
$("#onclickItemWrapper").animate({"opacity":"1", "top":parseInt(itemTop[0])+40+"px"},{duration:animationLength, easing:"easeInOutQuad"});
$("#onclickDescriptionWrapper").animate({"opacity":"1", "top":parseInt(descriptionTop[0])-40+"px"}, {duration:animationLength, easing:"easeInOutQuad"});
if(playlistOn){
//change icon
$(".playButton").css("background-image","url(images/pause.png)");
//disable the other buttons
$(".closeButton, .nextButton, .previousButton").addClass("disabledButton");
}
//animate buttons and other elements on hover
animateOnHover();
//add remove listener for the close button
$(".closeButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
}
});
//add listener for the next button
$(".nextButton, #onclickItemWrapper img").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
setTimeout(function(){
//if there's no next item, skip to the very first one
if(thiss.next(".masonryImage, .simpleImage").length == 0)
showItem($(".masonryImage, .simpleImage").first());
else
showItem(thiss.next(".masonryImage, .simpleImage"));
}, 1000);
}
});
//add listener for the previous button
$(".previousButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
setTimeout(function(){
//if there's no previous item, skip to the very last one
if(thiss.prev(".masonryImage, .simpleImage").length == 0)
showItem($(".masonryImage, .simpleImage").last());
else
showItem(thiss.prev(".masonryImage, .simpleImage"));
}, 1000);
}
});
//add listener for the play button
$(".playButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
//disable the other buttons
$(".closeButton, .nextButton, .previousButton").addClass("disabledButton");
playlist = setInterval(function(){
removeItem();
setTimeout(function(){
//if there's no previous item, skip to the very last one
if(thiss.next(".masonryImage, .simpleImage").length == 0)
showItem($(".masonryImage, .simpleImage").first());
else
showItem(thiss.next(".masonryImage, .simpleImage"));
thiss = thiss.next(".masonryImage, .simpleImage");
}, 1000);
}, playlistInterval);
//change icon
$(this).css("background-image","url(images/pause.png)");
playlistOn = true;
}
else{
//enable the other buttons
$(".closeButton, .nextButton, .previousButton").removeClass("disabledButton");
clearInterval(playlist);
//change icon
$(this).css("background-image","url(images/video.png)");
playlistOn = false;
}
});
}});
}
function removeItem(){
//get top positions
var itemTop = $("#onclickItemWrapper").css("top").split("px");
var descriptionTop = $("#onclickDescriptionWrapper").css("top").split("px");
$("#onclickItemWrapper").animate({"opacity":"0", "top":parseInt(itemTop[0])-40+"px"},{duration:animationLength, easing:"easeInOutQuad"});
$("#onclickDescriptionWrapper").animate({"opacity":"0", "top":parseInt(descriptionTop[0])+40+"px"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
$("#onclickWrapper").animate({"opacity":"0"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
$("#onclickWrapper").css("display","none");
$("#onclickDescriptionWrapper div").empty();
$("#onclickItemWrapper").empty();
//reset top and other values
$("#onclickItemWrapper").removeAttr("style");
$("#onclickDescriptionWrapper").removeAttr("style");
}});
}});
}
}
//function that handles the gallery items when clicked - popup, etc
function galleryClicked(){
//if play button is pressed
var playlistOn = false;
var playlist;
$(".galleryImage").on("click", function(evt){
evt.preventDefault();
evt.stopPropagation();
showItem($(this));
});
function showItem(thiss){
var thisItem = thiss.children("img.item");
var onClickWrapper = $("#onclickWrapper");
var thisDescription = thiss.children("span.description");
var gallerySize = $(".galleryImage").length;
var itemPosition = $(".galleryImage").index(thiss) + 1;
onClickWrapper.css("display","block");
//clone the item clicked on the itemwrapper
$("#onclickItemWrapper").html(thisItem.clone());
var newitem = $("#onclickItemWrapper .item");
//remove previous junk attached
newitem.removeAttr("style class");
//adjust inner wrapper width and height
if(document.documentElement.clientWidth <= 960)
$("#onclickItemWrapper").css({"height":document.documentElement.clientHeight+"px", "width":"100%", "top":$("#onclickDescriptionWrapper").height()-40+"px"});
else
$("#onclickItemWrapper").css({"width":document.documentElement.clientWidth+"px", "height":"100%"});
//if width>height, adjust to 80% width
if(newitem.width() > newitem.height()){
newitem.css({"width":"80%", "height":"auto"});
if(newitem.height() >= 0.8 * windowHeight)
newitem.css({"height":"80%", "width":"auto"});
}
//align vertically and horizontally
newitem.css({"margin-top":"-"+newitem.height()/2+"px", "margin-left":"-"+newitem.width()/2+"px"});
//add description, controls and count
onClickWrapper.append("<span class='itemDescription'>"+thisDescription.html()+"</span>");
onClickWrapper.append("<a class='button disabledButton itemCount'>"+itemPosition+" / "+gallerySize+"</a>");
onClickWrapper.append("<div class='previousButton'></div></div><div class='nextButton'></div><div class='closeButton'></div>");
onClickWrapper.animate({"opacity":"1"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
//get top positions
var itemTop = $("#onclickItemWrapper").css("top").split("px");
//animate them in
$("span.itemDescription").animate({"opacity":"1", "bottom":"0px"},{duration:animationLength, easing:"easeInOutQuad"});
$("#onclickItemWrapper").animate({"opacity":"1", "top":parseInt(itemTop[0])+40+"px"},{duration:animationLength, easing:"easeInOutQuad"});
if(playlistOn){
//change icon
$(".playButton").css("background-image","url(images/pause.png)");
//disable the other buttons
$(".closeButton, .nextButton, .previousButton").addClass("disabledButton");
}
//animate buttons and other elements on hover
animateOnHover();
//add remove listener for the close button
$(".closeButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
}
});
//add listener for the next button
$(".nextButton, #onclickItemWrapper img").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
setTimeout(function(){
//if there's no next item, skip to the very first one
if(thiss.next(".galleryImage").length == 0)
showItem($(".galleryImage").first());
else
showItem(thiss.next(".galleryImage"));
}, 1000);
}
});
//add listener for the previous button
$(".previousButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
removeItem();
setTimeout(function(){
//if there's no previous item, skip to the very last one
if(thiss.prev(".galleryImage").length == 0)
showItem($(".galleryImage").last());
else
showItem(thiss.prev(".galleryImage"));
}, 1000);
}
});
//add listener for the play button
$(".playButton").on("click", function(evt){
evt.stopPropagation();
if(!playlistOn){
//disable the other buttons
$(".closeButton, .nextButton, .previousButton").addClass("disabledButton");
playlist = setInterval(function(){
removeItem();
setTimeout(function(){
//if there's no previous item, skip to the very last one
if(thiss.next(".galleryImage").length == 0)
showItem($(".galleryImage").first());
else
showItem(thiss.next(".galleryImage"));
thiss = thiss.next(".galleryImage");
}, 1000);
}, playlistInterval);
//change icon
$(this).css("background-image","url(images/pause.png)");
playlistOn = true;
}
else{
//enable the other buttons
$(".closeButton, .nextButton, .previousButton").removeClass("disabledButton");
clearInterval(playlist);
//change icon
$(this).css("background-image","url(images/video.png)");
playlistOn = false;
}
});
//extract full-image from thumbnail
var newitemSrc = newitem.attr("src").split("/thumbnails/");
newitem.attr("src", newitemSrc[0]+"/full-images/"+newitemSrc[1]);
}});
}
function removeItem(){
//get top positions
var itemTop = $("#onclickItemWrapper").css("top").split("px");
$("span.itemDescription").animate({"opacity":"0", "bottom":"-40px"},{duration:animationLength, easing:"easeInOutQuad"});
$("#onclickItemWrapper").animate({"opacity":"0", "top":parseInt(itemTop[0])-40+"px"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
$("#onclickWrapper").animate({"opacity":"0"},{duration:animationLength, easing:"easeInOutQuad", complete:function(){
$("#onclickWrapper").css("display","none");
$(".nextButton, .previousButton, .closeButton, span.itemDescription, a.itemCount").remove();
$("#onclickItemWrapper").empty();
//reset top and other values
$("#onclickItemWrapper").removeAttr("style");
}});
}});
}
}
همانطور که مشاهده میکنید در همون خطوط اول فایل masonry-portfolio.html فراخوانی میشه.
ممنون میشم بگین چطوری اینو ویرایش کنم. من هرچه ادرس دهی کردم سایت اجرا نشد.