Buonasera,
per il mio sito ho la necessità di far eseguire all'interno della risposta ajax una funzione jquery per l'overlay.
vi posto un estratto di codice dell'homepage:
questo è il codice dell'ajax
questo è l'iframe della risposta ajax:
e questo il codice dell'iframe dentro la risposta ajax:
e questo è il codice dell'overlay:
per il mio sito ho la necessità di far eseguire all'interno della risposta ajax una funzione jquery per l'overlay.
vi posto un estratto di codice dell'homepage:
HTML:
<div class="container" id="gallery">
<br>
<nobr>
<ul>
<li><a class="more" href="#GEN">GEN</a></li>
<li><a class="more" href="#FEB">FEB</a></li>
<li><a class="more" href="#MAR">MAR</a></li>
<li><a class="more" href="#APR">APR</a></li>
<li><a class="more" href="#MAY">MAY</a></li>
<li><a class="more" href="#JUN">JUN</a></li>
<li><a class="more" href="#JUL">JUL</a></li>
<li><a class="more" href="#AUG">AUG</a></li>
<li><a class="more" href="#SEP">SEP</a></li>
<li><a class="more" href="#OCT">OCT</a></li>
<li><a class="more" href="#NOV">NOV</a></li>
<li><a class="more" href="#DEC">DEC</a></li>
</ul>
</nobr>
<div id="ajax"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="venobox/venobox.min.js"></script>
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script>
$(document).ready(function(){
/* default settings */
$('.venobox').venobox();
/* custom settings */
$('.venobox_custom').venobox({
framewidth: '100%', // default: ''
frameheight: '', // default: ''
border: '5px', // default: '0'
bgcolor: '#000', // default: '#fff'
titleattr: 'data-title', // default: 'title'
numeratio: true, // default: false
infinigall: true // default: false
});
/* auto-open #firstlink on page load */
$("#firstlink").venobox().trigger('click');
});
</script>questo è il codice dell'ajax
HTML:
jQuery(document).ready(function($) {
$('.more').on('click', function() {
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
}
$('#ajax').css({ display:'block' }).animate({ height:'200px' },function() {
$('#ajax').html('<img id="loader" src="loader.gif">');
$('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); // http://loadinfo.net/
$('#ajax').load('ciao.html ' + href, function() {
$('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': 'rgb(253,253,175)' });
});
});
});
});questo è l'iframe della risposta ajax:
HTML:
<div id="load">
<div id="GEN">
<a class="venobox_custom" id="overlay" scrolling="no" data-type="iframe" href="Songs/1.html">
<img class="img-responsive" id="img" src="https://i1.sndcdn.com/artworks-000148701958-pxqinx-t500x500.jpg">
</a>
DVD - JOURNEY
<br><br><br>
<a class="venobox_custom" id="overlay" scrolling="no" data-type="iframe" href="Songs/2.html">
<img class="img-responsive" id="img" src="https://i1.sndcdn.com/artworks-000148701958-pxqinx-t500x500.jpg">
</a>
DVD - JOURNEY
<br><br><br>
<a class="venobox_custom" id="overlay" scrolling="no" data-type="iframe" href="Songs/1.html">
<img class="img-responsive" id="img" src="https://i1.sndcdn.com/artworks-000148701958-pxqinx-t500x500.jpg">
</a>
DVD - JOURNEY
<br><br><br>
<a class="venobox_custom" id="overlay" scrolling="no" data-type="iframe" href="Songs/1.html">
<img class="img-responsive" id="img" src="https://i1.sndcdn.com/artworks-000148701958-pxqinx-t500x500.jpg">
</a>
DVD - JOURNEY
<br><br>
</div>
<div id="FEB">
<p>Lorem FEVB ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
<div id="MAR">
<p>Lorem MAER ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="venobox/venobox.min.js"></script>
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script>
$(document).ready(function(){
/* default settings */
$('.venobox').venobox();
/* custom settings */
$('.venobox_custom').venobox({
framewidth: '100%', // default: ''
frameheight: '', // default: ''
border: '5px', // default: '0'
bgcolor: '#000', // default: '#fff'
titleattr: 'data-title', // default: 'title'
numeratio: true, // default: false
infinigall: true // default: false
});
/* auto-open #firstlink on page load */
$("#firstlink").venobox().trigger('click');
});
</script>e questo il codice dell'iframe dentro la risposta ajax:
HTML:
<body id="song">
<div class="container">
<div class="row">
<div class="col-sm-12">
<iframe scrolling="no" width="100%" height="55%" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/249000587&auto_play=false&hide_related=true&show_comments=true&show_user=false&show_reposts=false&visual=true"></iframe>
</div>
</div>
<div class="row" height="5%">
</div>
<div class="row">
<div class="col-sm-3">
<img class="img-responsive" id="social" src="../img/facebook.png">
<img class="img-responsive" id="social" src="../img/soundcloud.png">
<img class="img-responsive" id="social" src="../img/youtube.png">
</div>
<div class="col-sm-8">
<nobr> <h6>AUTOR: </h6> <h5> DVDV</h5> </nobr><br>
<nobr> <h6>TITLE: </h6> <h5> Journey</h5></nobr><br>
</div>
</div>
</div>
<!-- script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="../js/jquery.fittext.js"></script>
<script type="text/javascript">
$.fn.ready(function () {
$("h6").fitText(1, { minFontSize: '20px', maxFontSize: '30px' });
$("h5").fitText(1, { minFontSize: '20px', maxFontSize: '30px' });
});
</script>
</body>e questo è il codice dell'overlay:
HTML:
(function($){
var autoplay, bgcolor, blocknum, blocktitle, border, core, container, content, dest,
evitacontent, evitanext, evitaprev, extraCss, figliall, framewidth, frameheight,
infinigall, items, keyNavigationDisabled, margine, numeratio, overlayColor, overlay,
prima, title, thisgall, thenext, theprev, type,
finH, sonH, nextok, prevok;
$.fn.extend({
//plugin name - venobox
venobox: function(options) {
// default option
var defaults = {
framewidth: '',
frameheight: '',
border: '0',
bgcolor: '#fff',
titleattr: 'title', // specific attribute to get a title (e.g. [data-title]) - thanx @mendezcode
numeratio: false,
infinigall: false,
overlayclose: true // disable overlay click-close - thanx @martybalandis
};
var option = $.extend(defaults, options);
return this.each(function() {
var obj = $(this);
// Prevent double initialization - thanx @matthistuff
if(obj.data('venobox')) {
return true;
}
obj.addClass('vbox-item');
obj.data('framewidth', option.framewidth);
obj.data('frameheight', option.frameheight);
obj.data('border', option.border);
obj.data('bgcolor', option.bgcolor);
obj.data('numeratio', option.numeratio);
obj.data('infinigall', option.infinigall);
obj.data('overlayclose', option.overlayclose);
obj.data('venobox', true);
obj.click(function(e){
e.stopPropagation();
e.preventDefault();
obj = $(this);
overlayColor = obj.data('overlay');
framewidth = obj.data('framewidth');
frameheight = obj.data('frameheight');
// set data-autoplay="true" for vimeo and youtube videos - thanx @zehfernandes
autoplay = obj.data('autoplay') || false;
border = obj.data('border');
bgcolor = obj.data('bgcolor');
nextok = false;
prevok = false;
keyNavigationDisabled = false;
// set a different url to be loaded via ajax using data-href="" - thanx @pixeline
dest = obj.data('href') || obj.attr('href');
extraCss = obj.data( 'css' ) || "";
$('body').addClass('vbox-open');
core = '<div class="vbox-overlay ' + extraCss + '" style="background:'+ overlayColor +'"><div class="vbox-preloader">Loading...</div><div class="vbox-container"><div class="vbox-content"></div></div><div class="vbox-title"></div><div class="vbox-num">0/0</div><div class="vbox-close">X</div><div class="vbox-next">next</div><div class="vbox-prev">prev</div></div>';
$('body').append(core);
overlay = $('.vbox-overlay');
container = $('.vbox-container');
content = $('.vbox-content');
blocknum = $('.vbox-num');
blocktitle = $('.vbox-title');
content.html('');
content.css('opacity', '0');
checknav();
overlay.css('min-height', $(window).outerHeight());
// fade in overlay
overlay.animate({opacity:1}, 250, function(){
if(obj.data('type') == 'iframe'){
loadIframe();
}else if (obj.data('type') == 'inline'){
loadInline();
}else if (obj.data('type') == 'ajax'){
loadAjax();
}else if (obj.data('type') == 'vimeo'){
loadVimeo(autoplay);
}else if (obj.data('type') == 'youtube'){
loadYoutube(autoplay);
} else {
content.html('<img src="'+dest+'">');
preloadFirst();
}
});
/* -------- CHECK NEXT / PREV -------- */
function checknav(){
thisgall = obj.data('gall');
numeratio = obj.data('numeratio');
infinigall = obj.data('infinigall');
items = $('.vbox-item[data-gall="' + thisgall + '"]');
if(items.length > 1 && numeratio === true){
blocknum.html(items.index(obj)+1 + ' / ' + items.length);
blocknum.show();
}else{
blocknum.hide();
}
thenext = items.eq( items.index(obj) + 1 );
theprev = items.eq( items.index(obj) - 1 );
if(obj.attr(option.titleattr)){
title = obj.attr(option.titleattr);
blocktitle.show();
}else{
title = '';
blocktitle.hide();
}
if (items.length > 1 && infinigall === true) {
nextok = true;
prevok = true;
if(thenext.length < 1 ){
thenext = items.eq(0);
}
if(items.index(obj) < 1 ){
theprev = items.eq( items.index(items.length) );
}
} else {
if(thenext.length > 0 ){
$('.vbox-next').css('display', 'block');
nextok = true;
}else{
$('.vbox-next').css('display', 'none');
nextok = false;
}
if(items.index(obj) > 0 ){
$('.vbox-prev').css('display', 'block');
prevok = true;
}else{
$('.vbox-prev').css('display', 'none');
prevok = false;
}
}
}
/* -------- NAVIGATION CODE -------- */
var gallnav = {
prev: function() {
if (keyNavigationDisabled) {
return;
} else {
keyNavigationDisabled = true;
}
overlayColor = theprev.data('overlay');
framewidth = theprev.data('framewidth');
frameheight = theprev.data('frameheight');
border = theprev.data('border');
bgcolor = theprev.data('bgcolor');
dest = theprev.data('href') || theprev.attr('href');
autoplay = theprev.data('autoplay');
if(theprev.attr(option.titleattr)){
title = theprev.attr(option.titleattr);
}else{
title = '';
}
if (overlayColor === undefined ) {
overlayColor = "";
}
content.animate({ opacity:0}, 500, function(){
overlay.css('background',overlayColor);
if (theprev.data('type') == 'iframe') {
loadIframe();
} else if (theprev.data('type') == 'inline'){
loadInline();
} else if (theprev.data('type') == 'ajax'){
loadAjax();
} else if (theprev.data('type') == 'youtube'){
loadYoutube(autoplay);
} else if (theprev.data('type') == 'vimeo'){
loadVimeo(autoplay);
}else{
content.html('<img src="'+dest+'">');
preloadFirst();
}
obj = theprev;
checknav();
keyNavigationDisabled = false;
});
},
next: function() {
if (keyNavigationDisabled) {
return;
} else {
keyNavigationDisabled = true;
}
overlayColor = thenext.data('overlay');
framewidth = thenext.data('framewidth');
frameheight = thenext.data('frameheight');
border = thenext.data('border');
bgcolor = thenext.data('bgcolor');
dest = thenext.data('href') || thenext.attr('href');
autoplay = thenext.data('autoplay');
if(thenext.attr(option.titleattr)){
title = thenext.attr(option.titleattr);
}else{
title = '';
}
if (overlayColor === undefined ) {
overlayColor = "";
}
content.animate({ opacity:0}, 500, function(){
overlay.css('background',overlayColor);
if (thenext.data('type') == 'iframe') {
loadIframe();
} else if (thenext.data('type') == 'inline'){
loadInline();
} else if (thenext.data('type') == 'ajax'){
loadAjax();
} else if (thenext.data('type') == 'youtube'){
loadYoutube(autoplay);
} else if (thenext.data('type') == 'vimeo'){
loadVimeo(autoplay);
}else{
content.html('<img src="'+dest+'">');
preloadFirst();
}
obj = thenext;
checknav();
keyNavigationDisabled = false;
});
}
};
/* -------- NAVIGATE WITH ARROW KEYS -------- */
$('body').keydown(function(e) {
if(e.keyCode == 37 && prevok == true) { // left
gallnav.prev();
}
if(e.keyCode == 39 && nextok == true) { // right
gallnav.next();
}
});
/* -------- PREVGALL -------- */
$('.vbox-prev').click(function(){
gallnav.prev();
});
/* -------- NEXTGALL -------- */
$('.vbox-next').click(function(){
gallnav.next();
});
/* -------- ESCAPE HANDLER -------- */
function escapeHandler(e) {
if(e.keyCode === 27) {
closeVbox();
}
}
/* -------- CLOSE VBOX -------- */
function closeVbox(){
$('body').removeClass('vbox-open');
$('body').unbind('keydown', escapeHandler);
overlay.animate({opacity:0}, 500, function(){
overlay.remove();
keyNavigationDisabled = false;
obj.focus();
});
}
/* -------- CLOSE CLICK -------- */
var closeclickclass = '.vbox-close, .vbox-overlay';
if(!obj.data('overlayclose')){
closeclickclass = '.vbox-close'; // close only on X
}
$(closeclickclass).click(function(e){
evitacontent = '.figlio';
evitaprev = '.vbox-prev';
evitanext = '.vbox-next';
figliall = '.figlio *';
if(!$(e.target).is(evitacontent) && !$(e.target).is(evitanext) && !$(e.target).is(evitaprev)&& !$(e.target).is(figliall)){
closeVbox();
}
});
$('body').keydown(escapeHandler);
return false;
});
});
}
});
/* -------- LOAD AJAX -------- */
function loadAjax(){
$.ajax({
url: dest,
cache: false
}).done(function( msg ) {
content.html('<div class="vbox-inline">'+ msg +'</div>');
updateoverlay(true);
}).fail(function() {
content.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>');
updateoverlay(true);
})
}
/* -------- LOAD IFRAME -------- */
function loadIframe(){
content.html('<iframe class="venoframe" src="'+dest+'"></iframe>');
// $('.venoframe').load(function(){ // valid only for iFrames in same domain
updateoverlay();
// });
}
/* -------- LOAD VIMEO -------- */
function loadVimeo(autoplay){
var pezzi = dest.split('/');
var videoid = pezzi[pezzi.length-1];
var stringAutoplay = autoplay ? "?autoplay=1" : "";
content.html('<iframe class="venoframe" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" src="//player.vimeo.com/video/'+videoid+stringAutoplay+'"></iframe>');
updateoverlay();
}
/* -------- LOAD YOUTUBE -------- */
function loadYoutube(autoplay){
var pezzi = dest.split('/');
var videoid = pezzi[pezzi.length-1];
var stringAutoplay = autoplay ? "?autoplay=1" : "";
content.html('<iframe class="venoframe" webkitallowfullscreen mozallowfullscreen allowfullscreen src="//www.youtube.com/embed/'+videoid+stringAutoplay+'"></iframe>');
updateoverlay();
}
/* -------- LOAD INLINE -------- */
function loadInline(){
content.html('<div class="vbox-inline">'+$(dest).html()+'</div>');
updateoverlay();
}
/* -------- PRELOAD IMAGE -------- */
function preloadFirst(){
prima = $('.vbox-content').find('img');
prima.one('load', function() {
updateoverlay();
}).each(function() {
if(this.complete) $(this).load();
});
}
/* -------- CENTER ON LOAD -------- */
function updateoverlay(){
blocktitle.html(title);
content.find(">:first-child").addClass('figlio');
$('.figlio').css('width', framewidth).css('height', frameheight).css('padding', border).css('background', bgcolor);
sonH = content.outerHeight();
finH = $(window).height();
if(sonH+80 < finH){
margine = (finH - sonH)/2;
content.css('margin-top', margine);
content.css('margin-bottom', margine);
}else{
content.css('margin-top', '40px');
content.css('margin-bottom', '40px');
}
content.animate({
'opacity': '1'
},'slow');
}
/* -------- CENTER ON RESIZE -------- */
function updateoverlayresize(){
if($('.vbox-content').length){
sonH = content.height();
finH = $(window).height();
if(sonH+80 < finH){
margine = (finH - sonH)/2;
content.css('margin-top', margine);
content.css('margin-bottom', margine);
}else{
content.css('margin-top', '40px');
content.css('margin-bottom', '40px');
}
}
}
$(window).resize(function(){
updateoverlayresize();
});
})(jQuery);
Ultima modifica:
