I'm a beginner in Jquery, and I'm trying to understand a code, and a template that I downloaded for study, but I'm not understanding anything, there's a modal window that opens the text with image information.
The modal opens, and has a button that I click to display the photo information,
Below is the section of the code that displays and hides the information, does it have any way of opening the modal, the information already appears in the photo without having to click the modal__info button? p>
$modalInfo = $('.modal__info'),
function showProjectInfo($element) {
var projectIsOpen = false,
inProcess = false;
//off/set handler on modal info btn
$modalInfo
.off('click')
.one('click', function () {
//find & clone project info to modal window
$element.next().clone().appendTo($modalContent);
})
.on('click', function () {
if (inProcess) return;
inProcess = true;
//already opened - close it
if (projectIsOpen) {
$modalContent
.find('.project-modal__inner')
.smoothAnimate({
opacity: [1, 0]
}, {
duration: 600,
complete: function () {
$modalContent
.find('.project-modal')
.smoothAnimate({
height: ['100%', 0]
}, {
duration: 600,
easing: 'ease',
complete: function () {
projectIsOpen = false;
inProcess = false;
}
});
}
});
return;
}
//not opened - open it
//find project info in modal & animate it
$modalContent
.find('.project-modal')
.css('display', 'block')
.smoothAnimate({
height: [0, '100%']
}, {
duration: 10,
easing: 'ease',
complete: function (elems) {
elems
.find('.project-modal__inner')
.smoothAnimate({
opacity: [0, 1]
}, {
duration: 10,
complete: function () {
projectIsOpen = true;
inProcess = false;
}
});
}
});
});
}