How to start the popup lightbox onLoad?

How to start the popup lightbox onLoad? - javascript

I want to make a lightbox popup. I want it to pop up when the webpage loads and close it when they click the lightbox popup. How can I do this?
Here is what I have so far but it doesn't work.
HTML FILE:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Lightbox 2</title>
<meta name="description" lang="en" content="testing" />
<meta name="author" content="Lokesh Dhakar">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" />
<link
href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700'
rel='stylesheet' type='text/css'>
</head>
<body>
<a href="images/examples/image-1.jpg" rel="lightbox">
<img src="images/examples/thumb-1.jpg" alt="" /></a>
<a href="images/examples/image-2.jpg" rel="lightbox"
title="Optional caption."><img src="images/examples/thumb-2.jpg"
alt="" /></a>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
JS FILE:
(function() {
var $, Lightbox, LightboxOptions;
$ = jQuery;
LightboxOptions = (function() {
function LightboxOptions() {
this.fileLoadingImage = 'images/loading.gif';
this.fileCloseImage = 'images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}
return LightboxOptions;
})();
Lightbox = (function() {
function Lightbox(options) {
this.options = options;
this.album = [];
this.currentImageIndex = void 0;
this.init();
}
Lightbox.prototype.init = function() {
this.enable();
return this.build();
};
Lightbox.prototype.enable = function() {
var _this = this;
return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
_this.start($(e.currentTarget));
return false;
});
};
Lightbox.prototype.build = function() {
var $lightbox,
_this = this;
$("<div>", {
id: 'lightboxOverlay'
}).after($('<div/>', {
id: 'lightbox'
}).append($('<div/>', {
"class": 'lb-outerContainer'
}).append($('<div/>', {
"class": 'lb-container'
}).append($('<img/>', {
"class": 'lb-image'
}), $('<div/>', {
"class": 'lb-nav'
}).append($('<a/>', {
"class": 'lb-prev'
}), $('<a/>', {
"class": 'lb-next'
})), $('<div/>', {
"class": 'lb-loader'
}).append($('<a/>', {
"class": 'lb-cancel'
}).append($('<img/>', {
src: this.options.fileLoadingImage
}))))), $('<div/>', {
"class": 'lb-dataContainer'
}).append($('<div/>', {
"class": 'lb-data'
}).append($('<div/>', {
"class": 'lb-details'
}).append($('<span/>', {
"class": 'lb-caption'
}), $('<span/>', {
"class": 'lb-number'
})), $('<div/>', {
"class": 'lb-closeContainer'
}).append($('<a/>', {
"class": 'lb-close'
}).append($('<img/>', {
src: this.options.fileCloseImage
}))))))).appendTo($('body'));
$('#lightboxOverlay').hide().on('click', function(e) {
_this.end();
return false;
});
$lightbox = $('#lightbox');
$lightbox.hide().on('click', function(e) {
if ($(e.target).attr('id') === 'lightbox') _this.end();
return false;
});
$lightbox.find('.lb-outerContainer').on('click', function(e) {
if ($(e.target).attr('id') === 'lightbox') _this.end();
return false;
});
$lightbox.find('.lb-prev').on('click', function(e) {
_this.changeImage(_this.currentImageIndex - 1);
return false;
});
$lightbox.find('.lb-next').on('click', function(e) {
_this.changeImage(_this.currentImageIndex + 1);
return false;
});
$lightbox.find('.lb-loader, .lb-close').on('click', function(e) {
_this.end();
return false;
});
};
Lightbox.prototype.start = function($link) {
var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
$(window).on("resize", this.sizeOverlay);
$('select, object, embed').css({
visibility: "hidden"
});
$('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
this.album = [];
imageNumber = 0;
if ($link.attr('rel') === 'lightbox') {
this.album.push({
link: $link.attr('href'),
title: $link.attr('title')
});
} else {
_ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
for (i = 0, _len = _ref.length; i < _len; i++) {
a = _ref[i];
this.album.push({
link: $(a).attr('href'),
title: $(a).attr('title')
});
if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
}
}
$window = $(window);
top = $window.scrollTop() + $window.height() / 10;
left = $window.scrollLeft();
$lightbox = $('#lightbox');
$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);
this.changeImage(imageNumber);
};
Lightbox.prototype.changeImage = function(imageNumber) {
var $image, $lightbox, preloader,
_this = this;
this.disableKeyboardNav();
$lightbox = $('#lightbox');
$image = $lightbox.find('.lb-image');
this.sizeOverlay();
$('#lightboxOverlay').fadeIn(this.options.fadeDuration);
$('.loader').fadeIn('slow');
$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb- numbers, .lb-caption').hide();
$lightbox.find('.lb-outerContainer').addClass('animating');
preloader = new Image;
preloader.onload = function() {
$image.attr('src', _this.album[imageNumber].link);
$image.width = preloader.width;
$image.height = preloader.height;
return _this.sizeContainer(preloader.width, preloader.height);
};
preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
};
Lightbox.prototype.sizeOverlay = function() {
return $('#lightboxOverlay').width($(document).width()).height($(document).height());
};
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
var $container, $lightbox, $outerContainer, containerBottomPadding, containerLeftPadding, containerRightPadding, containerTopPadding, newHeight, newWidth, oldHeight, oldWidth,
_this = this;
$lightbox = $('#lightbox');
$outerContainer = $lightbox.find('.lb-outerContainer');
oldWidth = $outerContainer.outerWidth();
oldHeight = $outerContainer.outerHeight();
$container = $lightbox.find('.lb-container');
containerTopPadding = parseInt($container.css('padding-top'), 10);
containerRightPadding = parseInt($container.css('padding-right'), 10);
containerBottomPadding = parseInt($container.css('padding-bottom'), 10);
containerLeftPadding = parseInt($container.css('padding-left'), 10);
newWidth = imageWidth + containerLeftPadding + containerRightPadding;
newHeight = imageHeight + containerTopPadding + containerBottomPadding;
if (newWidth !== oldWidth && newHeight !== oldHeight) {
$outerContainer.animate({
width: newWidth,
height: newHeight
}, this.options.resizeDuration, 'swing');
} else if (newWidth !== oldWidth) {
$outerContainer.animate({
width: newWidth
}, this.options.resizeDuration, 'swing');
} else if (newHeight !== oldHeight) {
$outerContainer.animate({
height: newHeight
}, this.options.resizeDuration, 'swing');
}
setTimeout(function() {
$lightbox.find('.lb-dataContainer').width(newWidth);
$lightbox.find('.lb-prevLink').height(newHeight);
$lightbox.find('.lb-nextLink').height(newHeight);
_this.showImage();
}, this.options.resizeDuration);
};
Lightbox.prototype.showImage = function() {
var $lightbox;
$lightbox = $('#lightbox');
$lightbox.find('.lb-loader').hide();
$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};
Lightbox.prototype.updateNav = function() {
var $lightbox;
$lightbox = $('#lightbox');
$lightbox.find('.lb-nav').show();
if (this.currentImageIndex > 0) $lightbox.find('.lb-prev').show();
if (this.currentImageIndex < this.album.length - 1) {
$lightbox.find('.lb-next').show();
}
};
Lightbox.prototype.updateDetails = function() {
var $lightbox,
_this = this;
$lightbox = $('#lightbox');
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
}
if (this.album.length > 1) {
$lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast');
} else {
$lightbox.find('.lb-number').hide();
}
$lightbox.find('.lb-outerContainer').removeClass('animating');
$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
return _this.sizeOverlay();
});
};
Lightbox.prototype.preloadNeighboringImages = function() {
var preloadNext, preloadPrev;
if (this.album.length > this.currentImageIndex + 1) {
preloadNext = new Image;
preloadNext.src = this.album[this.currentImageIndex + 1].link;
}
if (this.currentImageIndex > 0) {
preloadPrev = new Image;
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
}
};
Lightbox.prototype.enableKeyboardNav = function() {
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
};
Lightbox.prototype.disableKeyboardNav = function() {
$(document).off('.keyboard');
};
Lightbox.prototype.keyboardAction = function(event) {
var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
KEYCODE_ESC = 27;
KEYCODE_LEFTARROW = 37;
KEYCODE_RIGHTARROW = 39;
keycode = event.keyCode;
key = String.fromCharCode(keycode).toLowerCase();
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
this.end();
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
if (this.currentImageIndex !== 0) {
this.changeImage(this.currentImageIndex - 1);
}
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
if (this.currentImageIndex !== this.album.length - 1) {
this.changeImage(this.currentImageIndex + 1);
}
}
};
Lightbox.prototype.end = function() {
this.disableKeyboardNav();
$(window).off("resize", this.sizeOverlay);
$('#lightbox').fadeOut(this.options.fadeDuration);
$('#lightboxOverlay').fadeOut(this.options.fadeDuration);
return $('select, object, embed').css({
visibility: "visible"
});
};
return Lightbox;
})();
$(function() {
var lightbox, options;
options = new LightboxOptions;
return lightbox = new Lightbox(options);
});
}).call(this);

if your using jquery you can just create the link element as per the instructions and then use the following:
e.g
HTML:
<a id ="ele_id" href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
JS:
$('document').ready(function(){
$('#ele_id').trigger('click');
});
UPDATE
If you wanted you could use a cookie to check if it's hte users first time on the site and only run the light box if that is the case.
Using jquery cookie plugin: https://github.com/carhartl/jquery-cookie
$('document').ready(function(){
if ($.cookie('has_visited') != TRUE){
$('#ele_id').trigger('click');
$.cookie('has_visited', TRUE, { expires: 1 }); //this will set the cookie to expire after one day but you could make it longer
});

<!DOCTYPE html>
<html>
<head>
<Style>
#fade{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light{
display: none;
position: absolute;
top: 5%;
left: 45%;
width: 640px;
height: 453px;
margin-left: -250px;
margin-top: 100px;
background: #CCC;
z-index:1002;
overflow:visible;
}
</style>
<script>
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
<head>
<body onload="lightbox_open()";>
<div class="light" onClick="lightbox_close();" id="light"><img src="your_img.jpg"></div>
<div id="fade" onClick="lightbox_close();"></div>
</body>
</html>

Related

Iframe is not working on my website while working on local

<iframe class="metaframe rptss" src="//fileru.net/iframe.php?v=089d20963d577068d193e23819b04652" frameborder="0" scrolling="no" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
Hello people,
I really need help. So the iframe code you see above is working perfectly on my localhost server and i can watch it without problem but when i use this same embed link on my real server it doesn't work, it just shows a black screen instead of playing button. I am trying to figure it out for days but i couldn't find a solution. I got the embed link from this website(https://720p-izle.com/izle/altyazi/modo-aviao.html) and it works there perfectly as well but it doesn't work when i add it to my own website while working on localhost.
NOTE: You might see "this video is removed because of copyright(in Turkish)", when you open the embed link. It is because this embed link just opening it in certain IP(Turkish IP) as i guess. So this embed links is working for me but only problem is that i can see video when i click, when i add my localhost or when i go to the website where i took the link from but it doesn't work when i added it to my own website.
I was trying and searching so many things but i couldn't figure it out. So i also add #document as well and it gives some clue about the solution when i look but i don't have enough knowledge to understand it and fix the problem.
Another thing is that i also use some tools like(https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default) to see if problem is just because of my hosting and video is also not working on this tool as well.
I tried small things as well such as adding https://fileru...... or similar things and change iframe code but still it doesn't work. As i say before i saw some information about video working on documentation but i don't have enough coding knowledge to understand it.
Please help me because i am searching for the solution for days and i couldn't find anything.
<!DOCTYPE html><html lang="tr"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Video Player</title>
<meta name="referrer" content="no-referrer"> <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script>
function checkScreen() {
if (window.outerHeight > 1 && window.outerWidth > 1) {
if (window.outerHeight < 200 && window.outerWidth < 300) {
window.location.href = 'about:blank';
}
} else {
setTimeout(function() {
checkScreen();
}, 2);
}
}
checkScreen();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jwplayer.com/libraries/wr6i4gal.js"></script>
</head>
<body>
<div id="Player"></div>
<div id="icon-forward-desktop" class="jw-icon jw-icon-inline jw-button-color jw-reset jw-icon-rewind" role="button" tabindex="0" aria-label="10 Saniye İleri Sar">
<svg xmlns="http://www.w3.org/2000/svg" class="jw-svg-icon jw-svg-icon-rewind" viewBox="0 0 240 240" focusable="false">
<path d="M193.14,131.08a21.57,21.57,0,0,0-17.7-10.6,21.58,21.58,0,0,0-17.7,10.6,44.77,44.77,0,0,0,0,46.3,21.63,21.63,0,0,0,17.7,10.6,21.61,21.61,0,0,0,17.7-10.6A44.77,44.77,0,0,0,193.14,131.08Zm-17.7,47.2c-7.8,0-14.4-11-14.4-24.1s6.6-24.1,14.4-24.1,14.4,11,14.4,24.1S183.34,178.28,175.44,178.28ZM132,188V137l-4.8,4.8-6.8-6.8,13-13a4.8,4.8,0,0,1,8.2,3.4v62.7ZM30.89,52.88H161V33.58c0-5.3,3.6-7.2,8-4.3l41.8,27.9a5.8,5.8,0,0,1,2.7,2.7,6,6,0,0,1-2.7,8L169,95.78c-4.4,2.9-8,1-8-4.3V72.18H45.29v96.4h48.2v19.3H30.79a4.88,4.88,0,0,1-4.8-4.8V57.78A5,5,0,0,1,30.89,52.88Z"></path>
</svg>
<div class="jw-reset-text jw-tooltip jw-tooltip-rewind" dir="auto">
<div class="jw-text">10 Saniye İleri Sar</div>
</div>
</div>
<div id="icon-forward-mobile" class="jw-display-icon-container jw-display-icon-rewind jw-reset">
<div class="jw-icon jw-icon-rewind jw-button-color jw-reset" role="button" tabindex="0" aria-label="10 Saniye İleri Sar">
<svg xmlns="http://www.w3.org/2000/svg" class="jw-svg-icon jw-svg-icon-rewind" viewBox="0 0 240 240" focusable="false">
<path d="M193.14,131.08a21.57,21.57,0,0,0-17.7-10.6,21.58,21.58,0,0,0-17.7,10.6,44.77,44.77,0,0,0,0,46.3,21.63,21.63,0,0,0,17.7,10.6,21.61,21.61,0,0,0,17.7-10.6A44.77,44.77,0,0,0,193.14,131.08Zm-17.7,47.2c-7.8,0-14.4-11-14.4-24.1s6.6-24.1,14.4-24.1,14.4,11,14.4,24.1S183.34,178.28,175.44,178.28ZM132,188V137l-4.8,4.8-6.8-6.8,13-13a4.8,4.8,0,0,1,8.2,3.4v62.7ZM30.89,52.88H161V33.58c0-5.3,3.6-7.2,8-4.3l41.8,27.9a5.8,5.8,0,0,1,2.7,2.7,6,6,0,0,1-2.7,8L169,95.78c-4.4,2.9-8,1-8-4.3V72.18H45.29v96.4h48.2v19.3H30.79a4.88,4.88,0,0,1-4.8-4.8V57.78A5,5,0,0,1,30.89,52.88Z"></path>
</svg></div>
</div>
<script type="text/javascript">
var id = '181735092eb53d9ac628d04c735abf67';
var Playlist = false;
var PlayerSettings = {
width: '100%',
primary: 'html5',
autostart: false,
cast: {},
preload: 'auto',
playlist: Playlist,
renderCaptionsNatively: true,
playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
};
if (localStorage['position_' + id] > 30) {
//PlayerSettings.preload = 'none';
}
function inIframe() {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
function UpdateQualityText() {
var label = jwplayer().getQualityLevels()[jwplayer().getCurrentQuality()]['label'];
if (label.length > 1) {
$('#QualityText').show().html('Aktif Kalite: <b>' + label.replace('Auto', 'Otomatik') + '</b>');
}
};
function setPlayerEvents(Player) {
var Once = true;
var Played = false;
var Watched = false;
Player.on('seek', function(a) {
Once = false;
});
Player.on('play', function() {
Played = true;
if (Once) {
UpdateQualityText();
if (localStorage['position_' + id] > 30) {
jwplayer().seek(localStorage['position_' + id] - 5);
}
Once = false;
}
});
var sendTime = 0;
Player.on('time', function() {
localStorage.setItem('position_' + id, Player.getPosition())
if (!Once) {
var timestamp = Math.floor(Date.now() / 1000);
if (timestamp > sendTime + 5) {
sendTime = timestamp;
window.parent.postMessage({
timeInfo: {
time: Player.getPosition(),
duration: Player.getDuration()
}
}, '*');
}
}
if (!Watched) {
var RemainTime = Player.getDuration() - Player.getPosition();
if (RemainTime > 1 && RemainTime < 60) {
Watched = true;
window.parent.postMessage('videoWatched', '*');
}
}
});
Player.on('complete', function() {
delete localStorage['position_' + id];
});
Player.on('displayClick', function() {
if ($('#QualityText').length == 0) {
var mo = new MutationObserver(function(m) {
if (!$('.jw-flag-user-inactive').length) {
$('#QualityText').show();
} else {
$('#QualityText').hide();
}
});
mo.observe(document.querySelector('.jwplayer'), {
attributes: true
});
$('.jw-media').prepend(
'<div id="QualityText" style="display:none; width:170px; height:30px; font: normal 16px arial; line-height:30px; text-align:right; color:#fff; background:#0000; position:absolute; top:20px; right:20px; z-index:5;"></div>'
);
}
});
Player.on('ready', function() {
$('#icon-forward-desktop').insertAfter('.jw-icon-rewind:eq(1)');
$('#icon-forward-mobile').insertAfter('.jw-display-icon-display');
$('.jw-display-icon-next').hide();
$('#icon-forward-desktop, #icon-forward-mobile').click(function() {
jwplayer().seek(jwplayer().getPosition() + 10);
});
});
Player.on('pause', function() {
if (!puShown && popURL) {initPu();} });
Player.on('levelsChanged', function(e, a) {
UpdateQualityText();
});
setInterval(function() {
if (Played && Player.getQualityLevels()[Player.getCurrentQuality()]['label'] == 'Auto') {
var label = Player.getQualityLevels()[Player.getVisualQuality().level.index]['label'];
$('#QualityText').html(
'Aktif Kalite: <b>Otomatik <span style="font-weight:normal; font-size:11px; font-weight: 700; top:-3px; margin-left:2px; padding: 3px 5px 3px 5px; border-radius: 5px; background:#35c2ff; color:#000; position:relative;">' +
label + '</span></b>');
}
}, 1000);
Player.addButton(
'https://fileru-net.cdn.ampproject.org/i/s/fileru.net/misc/download.svg?2',
'Videoyu İndir',
function() {
var url =
'/download.php?v=089d20963d577068d193e23819b04652';
var win = window.open(url, '_blank');
win.focus();
},
'download'
);
}
var Trusted = false;
if (inIframe() && !Trusted) {
document.write('Videoyu oynatmaya yetkiniz yok.');
} else {
var prefetchPoster = new Image();
prefetchPoster.src = 'https://image.tmdb.org/t/p/w1280/9OaIWmWI7Ph3jqj235zQIrh5yVd.jpg';
var Expire = false;
$.getJSON('/source.php?h=7715d59a058cef05555c295105624519a77a08c27c664c50d00001a6be526a0e032f03061c37ecd74137f5d6adb024788ef3d365950f81392ad735d723cf83cbba3b94172f8b40f6c030d0eac4bb10b434f7b53733e54a7c02b7810bcc862eca7b3df51f47f3af15e32b0ca86ecf910c6c80fb39b12c69815a85ce7faea88c0182709447c0ba8d1c208f2dc1ca8c4ad5', function(Response) {
PlayerSettings.image = prefetchPoster.src;
PlayerSettings.sources = Response.sources;
PlayerSettings.tracks = [];
Expire = Response.expire;
var Player = jwplayer('Player').setup(PlayerSettings);
setPlayerEvents(Player);
setInterval(function() {
var time = Math.floor(Date.now() / 1000);
if (Expire != false && time > Expire) {
var tmpExpire = Expire;
Expire = false;
$.getJSON('/source.php?h=7715d59a058cef05555c295105624519a77a08c27c664c50d00001a6be526a0e032f03061c37ecd74137f5d6adb024788ef3d365950f81392ad735d723cf83cbba3b94172f8b40f6c030d0eac4bb10b434f7b53733e54a7c02b7810bcc862eca7b3df51f47f3af15e32b0ca86ecf910c6c80fb39b12c69815a85ce7faea88c0182709447c0ba8d1c208f2dc1ca8c4ad5&e=' + tmpExpire, function(Response) {
var LastPosition = Player.getPosition();
var LastState = Player.getState();
Expire = Response.expire;
PlayerSettings.sources = Response.sources;
Player.load(PlayerSettings);
jwplayer().seek(LastPosition);
if (LastState == 'playing') {
Player.play();
} else {
Player.pause();
}
});
}
}, 1000);
});
}
function receiveMessage(event) {
var data = event.data;
if ('playerSeek' in data) {
jwplayer().seek(data['playerSeek']);
}
}
window.addEventListener("message", receiveMessage, false);
</script>Videoyu oynatmaya yetkiniz yok.
<script>
var popURL = "https://720p-izle.com/detay/fast-furious-presents-hobbs-shaww/"; var puShown = false;
function doOpen(url) {
if (puShown == true) {
return true;
}
win = window.open(url, 'yenipencere', 'menubar=0,resizable=1,width=1,height=1');
win.moveTo(150000, 150000);
if (win) {
win.blur();
puShown = true;
}
return win;
}
function setCookie(cname, cvalue, extime) {
var d = new Date();
d.setTime(d.getTime() + extime);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function initPu() {
if (document.attachEvent) {
document.attachEvent('onclick', checkTarget);
} else if (document.addEventListener) {
document.addEventListener('click', checkTarget, false);
}
}
function checkTarget(e) {
if (!getCookie('popunderPause')) {
var e = e || window.event;
var win = doOpen(popURL);
setCookie('popunderPause', 1, 1 * 60 * 60 * 1000);
}
}
</script>
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-125574692-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-125574692-2');
</script>
<script>
</script>
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background: #000;
}
#Player {
position: fixed;
width: 100%;
height: 100% !important;
left: 0;
top: 0;
z-index: 10
}
.jw-rightclick {
display: none !important
}
.jw-settings-menu {
width: 135px !important;
}
.jw-breakpoint-7 .jw-settings-menu,
.jw-breakpoint-6 .jw-settings-menu,
.jw-breakpoint-5 .jw-settings-menu,
.jw-breakpoint-4 .jw-settings-menu,
.jw-breakpoint-3 .jw-settings-menu {
max-height: 220px !important;
height: 220px !important;
}
.jw-settings-content-item {
font-size: 15px
}
.jw-settings-content-item.jw-settings-item-active {
color: #35c2ff
}
.jw-text-elapsed,
.jw-text-duration {
font-size: 15px
}
.jw-slider-horizontal .jw-slider-container {
height: 10px
}
.jw-knob {
height: 16px;
width: 16px
}
</style>
<link href="https://cdn.jsdelivr.net/npm/normalize.css#8.0.1/normalize.css" rel="stylesheet" type="text/css">
<link href="misc/style.css?3" rel="stylesheet" type="text/css">
</body></html>

Make Fullpage-Scroll-Script less static

Heyo,
I got a little Fullpage-Scroll-Script and I want to make it a bit less static. So instead of calling every single Div by a different Class (.one, .two, .tree...) I want to make the script work if all Divs have only one Class (.page). I tried it myself with the .each() function from jQuery ... but I couldn't get it to work.
Here is the current Script:
// Fullpage Scroll Script
function ScrollHandler(pageClass) {
var page = $('.' + pageClass);
var pageStart = page.offset().top;
var pageJump = false;
function scrollToPage() {
pageJump = true;
$('html, body').animate({
scrollTop: pageStart
}, {
duration: 1000,
easing:'swing',
complete: function() {
pageJump = false;
}
});
}
window.addEventListener('wheel', function(event) {
var viewStart = $(window).scrollTop();
if (!pageJump) {
var pageHeight = page.height();
var pageStopPortion = pageHeight / 2;
var viewHeight = $(window).height();
var viewEnd = viewStart + viewHeight;
var pageStartPart = viewEnd - pageStart;
var pageEndPart = (pageStart + pageHeight) - viewStart;
var canJumpDown = pageStartPart >= 0;
var stopJumpDown = pageStartPart > pageStopPortion;
var canJumpUp = pageEndPart >= 0;
var stopJumpUp = pageEndPart > pageStopPortion;
var scrollingForward = event.deltaY > 0;
if ( ( scrollingForward && canJumpDown && !stopJumpDown) || (!scrollingForward && canJumpUp && !stopJumpUp)) {
event.preventDefault();
scrollToPage();
}
} else {
event.preventDefault();
}
});
}
new ScrollHandler('one');
new ScrollHandler('two');
new ScrollHandler('three');
* {
margin:0;
padding:0;
}
.page {
height: 100vh;
}
.one { background-color: blue; }
.two { background-color: green; }
.three { background-color: orange; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page one"></div>
<div class="page two"></div>
<div class="page three"></div>
So instead of using:
new ScrollHandler('one');
new ScrollHandler('two');
new ScrollHandler('three');
I tried to use this:
$('.page').each(function() {
new ScrollHandler('page');
}
But it only worked for the first Div.

You need to pass $(this) in each loop and change the page variable to get directly the parameter :
// Fullpage Scroll Script
function ScrollHandler(pageClass) {
var page = pageClass;
var pageStart = page.offset().top;
var pageJump = false;
function scrollToPage() {
pageJump = true;
$('html, body').animate({
scrollTop: pageStart
}, {
duration: 1000,
easing: 'swing',
complete: function() {
pageJump = false;
}
});
}
window.addEventListener('wheel', function(event) {
var viewStart = $(window).scrollTop();
if (!pageJump) {
var pageHeight = page.height();
var pageStopPortion = pageHeight / 2;
var viewHeight = $(window).height();
var viewEnd = viewStart + viewHeight;
var pageStartPart = viewEnd - pageStart;
var pageEndPart = (pageStart + pageHeight) - viewStart;
var canJumpDown = pageStartPart >= 0;
var stopJumpDown = pageStartPart > pageStopPortion;
var canJumpUp = pageEndPart >= 0;
var stopJumpUp = pageEndPart > pageStopPortion;
var scrollingForward = event.deltaY > 0;
if ((scrollingForward && canJumpDown && !stopJumpDown) || (!scrollingForward && canJumpUp && !stopJumpUp)) {
event.preventDefault();
scrollToPage();
}
} else {
event.preventDefault();
}
});
}
$('.page').each(function() {
new ScrollHandler($(this));
})
* {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.three {
background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page one"></div>
<div class="page two"></div>
<div class="page three"></div>
JSfiddle: https://jsfiddle.net/fw8h7v4q/

code does not work outside jsfiddle

There is a jsfiddle code that I'd like to use on my page.
I copied css and put it into <style> tag on my page. Then I separate part that starts with
$(function(){
$('.anyClass').liEqualizer({
and put it into custom.js. And the first part that starts with (function ($) { I put into audio_frequency.js. I added its imports to head tag. The page looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
.sampleWrap {
margin-left: 6%;
margin-top: 5%;
}
.eqCol {
width: 80px;
margin: 0 0 0 2px;
float: left;
}
.eqItem {
height: 20px;
width: 100%;
background: transparent;
margin: 1px 0 0 0;
opacity: 0;
box-shadow: 15px 20px 0px rgba(0,0,0,0.1);
}
.eqCol .eqItem:last-child {
opacity:1 !important
}
</style>
<script src="jquery-3.2.1.slim.min.js"></script>
<script src="audio_frequency.js"></script>
<script src="custom.js"></script>
</head>
<body>
<div class="sampleWrap d-flex">
<div class="anyClass"></div>
<div style="clear:both; padding:15px 0">
<button class="start">start</button>
<button class="stop">stop</button>
</div>
</div>
</div>
</body>
</html>
custom.js looks like this
$(document).ready(function() {
$('.anyClass').liEqualizer({
row:7,
col:20,
speed:20,
freq:400,
on:true
});
$('.start').click(function(){
$('.anyClass').liEqualizer('start');
return false;
})
$('.stop').click(function(){
$('.anyClass').liEqualizer('stop');
return false;
})
});
and audio_frequency looks like this
(function ($) {
var methods = {
init: function (options) {
var p = {
row: 7,
col: 6,
speed: 20,
freq: 400,
on: true
};
if (options) {
$.extend(p, options);
}
var eqWrap = $(this).addClass('eqWrap');
for (c = 0; c < p.col; c++) {
var eqColEl = $('<div>').addClass('eqCol').appendTo(eqWrap);
for(r = 0; r < p.row; r++){
$('<div>').addClass('eqItem').appendTo(eqColEl);
}
}
var
eqCol = $('.eqCol', eqWrap),
eqItem = $('.eqItem', eqWrap),
randomNumber = function (m, n){
m = parseInt(m);
n = parseInt(n);
return Math.floor(Math.random() * (n - m + 1)) + m;
},
eqUp = function(colEl, val) {
var
speed = p.speed,
v = p.row - val,
i = p.row,
j = 0,
flag2 = true,
eachItemUp = function(){
$('.eqItem', colEl).eq(i - 1).nextAll().stop().css({ opacity:'1' });
if ($('.eqItem', colEl).eq(i - 1).css('opacity') == 1) { flag2 = false }
else { flag2 = true }
$('.eqItem', colEl).eq(i - 1).stop(true).animate({ opacity:'1' }, p.speed, function() {
if ($('.eqItem', colEl).index(this) == v) {
if(flag2) {
eqDown(colEl,val);
}
} else {
i--;
j++;
if(i>v){
eachItemUp()
}
}
})
}
eachItemUp()
},
eqDown = function(colEl,val){
var
v = p.row - val,
i = (p.row-val),
j = 0,
speed = p.speed * 2,
eachItemDown = function(){
if (i == (p.row - val)) {
$('.eqItem', colEl).eq(i).animate({ opacity:'0' }, speed * 10)
setTimeout(function() {
i++;
j++;
if(i < p.row){
eachItemDown();
}
}, speed)
} else {
$('.eqItem', colEl).eq(i).animate({ opacity:'0' }, speed, function(){
i++;
j++;
if(i < p.row){
eachItemDown();
}
})
}
}
eachItemDown();
},
eqInterval = function(){
eqCol.each(function(){
eqUp($(this), randomNumber(0, p.row))
})
}
eqInterval()
if (p.on) {
var eqIntervalId = setInterval(eqInterval, p.freq)
$(this).data({
'eqIntId': eqIntervalId,
'eqInt': eqInterval,
'freq': p.freq,
'on': p.on
})
} else {
$(this).data({
'eqIntId':eqIntervalId,
'eqInt':eqInterval,
'freq':p.freq,
'on':p.on
})
}
}, start: function () {
if (!$(this).data('on')) {
$(this).data('eqInt')();
var eqIntervalId = setInterval($(this).data('eqInt'), $(this).data('freq'));
$(this).data ({
'eqIntId':eqIntervalId,
'on':true
})
}
},
stop: function () {
if($(this).data('on')) {
clearInterval($(this).data('eqIntId'));
$('.eqItem', $(this)).animate({opacity:0})
$(this).data({
'on':false
})
}
}
};
$.fn.liEqualizer = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' in jQuery.liEqualizer does not exist');
}
};
})(jQuery);
But when I load page I get
TypeError: $(...).eq(...).nextAll(...).stop is not a function[Learn More]
What is the problem? Is it trying to evaluate something before all the components are ready on the page?

This $(...).eq(...).nextAll(...).stop error is because of jquery-3.2.1.slim.min.js this ist not complete.
Note:
In the jquery.slim.js, the following functions of code are removed:
jQuery.fn.extend
jquery.fn.load
jquery.each // Attach a bunch of functions for handling common AJAX events
jQuery.expr.filters.animated
ajax settings like jQuery.ajaxSettings.xhr, jQuery.ajaxPrefilter, jQuery.ajaxSetup, jQuery.ajaxPrefilter, jQuery.ajaxTransport,
jQuery.ajaxSetup
xml parsing like jQuery.parseXML,
animation effects like jQuery.easing, jQuery.Animation, jQuery.speedIn the jquery.slim.js, the following function of code are removed:
Here is the complete code, you need jquery lib <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<style>
/*Layout css*/
body {
margin: 0;
padding: 20px 10px;
text-align: center
}
.sampleWrap {
height: 290px
}
/*plugin css*/
.eqWrap {
margin: -1px 0 0 -2px;
overflow: hidden;
display: inline-block; //display:inline; //zoom:1;}
.eqCol {
width: 37px;
margin: 0 0 0 2px;
float: left;
}
.eqItem {
height: 10px;
width: 100%;
background: #e7aa3b;
margin: 1px 0 0 0;
opacity: 0
}
.eqCol .eqItem:last-child {
opacity: 1 !important
}
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<div class="sampleWrap">
<div class="anyClass"></div>
<div style="clear:both; padding:15px 0">
<button class="start">start</button>
<button class="stop">stop</button>
</div>
<div class="anyClass2"></div>
<div style="clear:both; padding:15px 0">
<button class="start2">start</button>
<button class="stop2">stop</button>
</div>
</div>
<script>
/*код плагина*/
(function($) {
var methods = {
init: function(options) {
var p = {
row: 7, //кол-во столбцов
col: 6, //кол-во колонок
speed: 20, //скорость подсветки кубиков
freq: 400, //частота сигнала
on: true //включено по умолчанию (true,false)
};
if (options) {
$.extend(p, options);
}
var eqWrap = $(this).addClass('eqWrap');
for (c = 0; c < p.col; c++) {
var eqColEl = $('<div>').addClass('eqCol').appendTo(eqWrap);
for (r = 0; r < p.row; r++) {
$('<div>').addClass('eqItem').appendTo(eqColEl);
}
}
var
eqCol = $('.eqCol', eqWrap),
eqItem = $('.eqItem', eqWrap),
randomNumber = function(m, n) {
m = parseInt(m);
n = parseInt(n);
return Math.floor(Math.random() * (n - m + 1)) + m;
},
eqUp = function(colEl, val) {
var
speed = p.speed,
v = p.row - val,
i = p.row,
j = 0,
flag2 = true,
eachItemUp = function() {
$('.eqItem', colEl).eq(i - 1).nextAll().stop().css({
opacity: '1'
});
if ($('.eqItem', colEl).eq(i - 1).css('opacity') == 1) {
flag2 = false
} else {
flag2 = true
}
$('.eqItem', colEl).eq(i - 1).stop(true).animate({
opacity: '1'
}, p.speed, function() {
if ($('.eqItem', colEl).index(this) == v) {
if (flag2) {
eqDown(colEl, val);
}
} else {
i--;
j++;
if (i > v) {
eachItemUp()
}
}
})
}
eachItemUp()
},
eqDown = function(colEl, val) {
var
v = p.row - val,
i = (p.row - val),
j = 0,
speed = p.speed * 2,
eachItemDown = function() {
if (i == (p.row - val)) {
$('.eqItem', colEl).eq(i).animate({
opacity: '0'
}, speed * 10)
setTimeout(function() {
i++;
j++;
if (i < p.row) {
eachItemDown();
}
}, speed)
} else {
$('.eqItem', colEl).eq(i).animate({
opacity: '0'
}, speed, function() {
i++;
j++;
if (i < p.row) {
eachItemDown();
}
})
}
}
eachItemDown();
},
eqInterval = function() {
eqCol.each(function() {
eqUp($(this), randomNumber(0, p.row))
})
}
eqInterval()
if (p.on) {
var eqIntervalId = setInterval(eqInterval, p.freq)
$(this).data({
'eqIntId': eqIntervalId,
'eqInt': eqInterval,
'freq': p.freq,
'on': p.on
})
} else {
$(this).data({
'eqIntId': eqIntervalId,
'eqInt': eqInterval,
'freq': p.freq,
'on': p.on
})
}
},
start: function() {
if (!$(this).data('on')) {
$(this).data('eqInt')();
var eqIntervalId = setInterval($(this).data('eqInt'), $(this).data('freq'));
$(this).data({
'eqIntId': eqIntervalId,
'on': true
})
}
},
stop: function() {
if ($(this).data('on')) {
clearInterval($(this).data('eqIntId'));
$('.eqItem', $(this)).animate({
opacity: 0
})
$(this).data({
'on': false
})
}
}
};
$.fn.liEqualizer = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Метод ' + method + ' в jQuery.liEqualizer не существует');
}
};
})(jQuery);
/*инициализация плагина*/
$(function() {
$('.anyClass').liEqualizer({
row: 7, //кол-во столбцов
col: 6, //кол-во колонок
speed: 20, //скорость подсветки кубиков
freq: 400, //частота сигнала
on: true //включено по умолчанию (true,false)
});
$('.start').click(function() {
$('.anyClass').liEqualizer('start');
return false;
})
$('.stop').click(function() {
$('.anyClass').liEqualizer('stop');
return false;
})
$('.anyClass2').liEqualizer({
row: 7, //кол-во столбцов
col: 6, //кол-во колонок
speed: 20, //скорость подсветки кубиков
freq: 400, //частота сигнала
on: false //включено по умолчанию (true,false)
});
$('.start2').click(function() {
$('.anyClass2').liEqualizer('start');
return false;
})
$('.stop2').click(function() {
$('.anyClass2').liEqualizer('stop');
return false;
})
});
</script>

Add Lightbox in my code

I am working with thumnail image slider (jquery).Here i want to add a icon of zoom.when click then the selected image popup.this is current jquery code.
;(function($) {
// TODO:
// make sure we use ids, dont select stuff outside of plugin
var pluginName = 'pGallery',
defaults = {
printableVersionText: "Printable Version",
prevPhotoText: "<",
nextPhotoText: " >",
prevButtonText: "<",
nextButtonText: "Next >",
mobileCloseMarkup: "<i class='icon-remove'/>",
mobilePrevMarkup: "<i class='icon-chevron-left'/>",
mobileNextMarkup: "<i class='icon-chevron-right'/>",
mobileSlide: true
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new pGallery( this, options ));
}
});
};
// Primary Galleriffic initialization function that should be called on the thumbnail container.
function pGallery(element, options) {
// Extend Gallery Object
$.extend( {}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this._element = element;
this.init();
}
pGallery.prototype.init = function(){
// here should set elements to variables to avoid searching again
// call methods to set up
// break down methods as much as possible
// simplify initial markup - add it all in init
this.addMarkup();
this.addControls();
}
pGallery.prototype.addMarkup = function() {
// is there a way to make the code in this method prettier? :|
this.$list = $(this._element);
this.$list.wrap("<div id='thumbs-container'/>");
this.$thumbsContainer = this.$list.parent();
this.$pagination = $("<div class='pagination1 '/>");
this.$thumbsContainer.append(this.$pagination.clone());
this.$pagination = this.$thumbsContainer.find("div.pagination1 ");
this.$pGalleryContainer = $("<div id='pGalleryContainer'/>");
this.$pGalleryContainer.insertBefore(this.$thumbsContainer);
this.$pGalleryContainer.append(this.$thumbsContainer);
this.$content = $("<div/>").addClass("pgallery-content");
this.$controls = $("<div/>").addClass("controls");
this.$bigSlideshowContainer = $("<div/>").addClass("big-slideshow-container");
this.$loadingSlideshowContainer = $("<div/>").addClass("loading-slideshow-container");
this.$loadingSlideshowContainer.append(this.$loading = $("<div/>").addClass("loading"));
this.$loadingSlideshowContainer.append(this.$loadingCaptionContainer = $("<div/>").addClass("caption-container"));
this.$slideshowContainer = $("<div/>").addClass("slideshow-container");
this.$slideshowContainer.append(this.$slideshow = $("<div/>").addClass("slideshow"));
this.$slideshowContainer.append(this.$captionContainer = $("<div/>").addClass("caption-container"));
this.$bigSlideshowContainer.append(this.$loadingSlideshowContainer);
this.$bigSlideshowContainer.append(this.$slideshowContainer);
this.$content.append(this.$controls);
this.$content.append(this.$bigSlideshowContainer);
$("body").append(this.$mobileOverlay = $("<div id='mobile-overlay'></div>"));
this.$mobileCloseButton = $("<div id='mobile-close-button'/>");
this.$mobileCloseWrap = $("<div id='mobile-close-wrap'/>").append($("<a href='#'/>").append(this.$mobileCloseButton));
this.$mobileCloseButton.append($(this._defaults.mobileCloseMarkup));
this.$mobilePrevButton = $("<div id='mobile-prev-button'/>");
this.$mobilePrevWrap = $("<div id='mobile-prev-wrap'/>").append($("<a href='#'/>").append(this.$mobilePrevButton));
this.$mobilePrevButton.append($(this._defaults.mobilePrevMarkup));
this.$mobileNextButton = $("<div id='mobile-next-button'/>");
this.$mobileNextWrap = $("<div id='mobile-next-wrap'/>").append($("<a href='#'/>").append(this.$mobileNextButton));
this.$mobileNextButton.append($(this._defaults.mobileNextMarkup));
this.$mobileThumbs = $("<ul/>").addClass("mobile-thumbs");
this.$mobileLoader = $("<div id='mobile-loader'/>");
this.$mobileOverlay.append(this.$mobileCloseWrap);
this.$mobileOverlay.append(this.$mobilePrevWrap);
this.$mobileOverlay.append(this.$mobileNextWrap);
this.$mobileOverlay.append(this.$mobileThumbs);
this.$mobileOverlay.append(this.$mobileLoader);
this.$pGalleryContainer.append(this.$content);
//this.$pGalleryContainer.append(this.$mobileOverlayTemp);
var self = this;
this.$list.children().each(function(i){
var $this = $(this);
$image = $this.find("img"),
imageURI = $image.attr("src"),
title = $image.attr("title");
$image.wrap("<a class='thumb' href='"+imageURI+"'/>");
$image.wrap("<div class='thumb-wrap'/>");
var $thumbWrap = $image.parent();
$thumbWrap.css("background-image", "url('"+imageURI+"')");
$image.hide();
var $caption = $("<div/>").addClass("caption"),
$download = $("<div/>").addClass("magnify").appendTo($caption),
$printable = $("<a/>").attr("href", imageURI).text(self._defaults.printableVersionText).appendTo($download),
$title = $("<div/>").addClass("image-title").text(title).appendTo($caption);
$caption.appendTo($this);
$this.addClass("image"+(i+1));
self.$mobileThumbs.append($("<li/>").addClass("m-image"+(i+1)));
self.overlayImageHtml(i+1);
});
self.$mobileThumbs.children().hide();
}
pGallery.prototype.addControls = function() {
var self = this;
// count the thumbs
this.numThumbs = this.$list.children().length;
this.divWidth = this.$thumbsContainer.width();
this.liWidth = this.$list.children().first().outerWidth(true);
this.currImage = 0;
this.currPage = 0;
this.perPage = 12;
this.changingImage = false;
// arrange them
this.cols = Math.floor(this.divWidth/this.liWidth);
// arrange the left controls
this.numPages = Math.ceil(this.numThumbs/this.perPage);
this.$navPrevButton = $("<a/>").addClass("p-prev").text(this._defaults.prevButtonText).appendTo(this.$pagination);
for (var i = 0; i < this.numPages; i++)
{
this.$pagination.append($("<a/>").addClass("p"+(i+1)).text((i+1)));
var $pageButton = this.$pagination.find(".p"+(i+1));
$pageButton.click(function(e) {
e.preventDefault();
self.pageChange($(this).text());
return false;
});
}
this.$navNextButton = $("<a/>").addClass("p-next").text(this._defaults.nextButtonText).appendTo(this.$pagination);
this.$navPrevButton.click(function(e) {
e.preventDefault();
self.pagePrev();
return false;
});
this.$navNextButton.click(function(e) {
e.preventDefault();
self.pageNext();
return false;
});
this.$navPrevButton.hide();
// make ellipses for hiding the page numbers on smaller screens and hide them
this.$ellRight = $("<span class='r-ell'>...</span>").insertBefore(this.$pagination.children(".p"+this.numPages)).hide();
this.$ellLeft = $("<span class='l-ell'>...</span>").insertAfter(this.$pagination.children(".p1")).hide();
// place the right controls
this.$controls.append(this.$prevButton = $("<a/>").addClass("prev").text(this._defaults.prevPhotoText));
this.$controls.append(this.$nextButton = $("<a/>").addClass("next").text(this._defaults.nextPhotoText));
this.$prevButton.click(function(e) {
e.preventDefault();
self.imagePrev();
return false;
});
this.$nextButton.click(function(e) {
e.preventDefault();
self.imageNext();
return false;
});
// setup thumb clicking
this.$list.find("li > a").click(function(e) {
e.preventDefault();
if (self.mobileScreenSize()){
self.showOverlay($(this).parent().attr('class'));
}
else{
self.changeImage($(this).parent().attr('class'));
}
return false;
});
this.$mobileCloseWrap.children("a").click(function(e) {
e.preventDefault();
self.hideOverlay();
return false;
});
this.$mobileNextWrap.children("a").click(function(e) {
e.preventDefault();
self.imageNext();
return false;
});
this.$mobilePrevWrap.children("a").click(function(e) {
e.preventDefault();
self.imagePrev();
return false;
});
this.changeImage('image1');
var image = this.$list.children().first().find("img").attr('src');
var rtime = new Date(1, 1, 2000, 12,00,00);
var timeout = false;
var delta = 200;
$(window).resize(function() {
rtime = new Date();
if (timeout === false) {
timeout = true;
setTimeout(resizeend, delta);
}
});
function resizeend() {
if (new Date() - rtime < delta) {
setTimeout(resizeend, delta);
} else {
timeout = false;
self.resize();
}
}
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key
console.log("escape");
self.hideOverlay();
}
if (e.keyCode == 39) { // right arrow
console.log("right");
self.imageNext();
}
if (e.keyCode == 37) { // right arrow
console.log("left");
self.imagePrev();
}
});
this.resize();
}
pGallery.prototype.changeImage = function(liClass, right) {
right = typeof right !== 'undefined' ? right : true;
if (parseInt(liClass.replace("image","")) == this.currImage)
return;
this.currImage = parseInt(liClass.replace("image",""));
this.$list.children().removeClass("current");
this.$list.children("."+liClass).addClass("current");
var title = this.$list.children("."+liClass).find("a").attr('title');
//var imageURI = this.$list.children("."+liClass).find("div").css("background-image").replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
var imageURI = this.$list.children("."+liClass).find("img").attr('src');
var slideshowHtml = "<img title='"+(title != null?title:"")+"' src='"+imageURI+"'/>";
this.$loadingSlideshowContainer.children(".loading").html(this.$slideshow.html());
this.$slideshow.html(slideshowHtml);
this.$loadingCaptionContainer.html(this.$captionContainer.html());
this.$captionContainer.html(this.$list.children("."+liClass).find(".caption").html());
var time = 500;
if (this.$loadingSlideshowContainer.is(':animated') || this.$slideshowContainer.is(':animated')){
time = 0;
}
if (this.$loadingSlideshowContainer.children(".loading").html() != "")
{
this.$loadingSlideshowContainer.fadeTo(0, 1);
this.$slideshowContainer.fadeTo(0, 0);
this.$loadingSlideshowContainer.fadeTo(time, 0);
this.$slideshowContainer.fadeTo(time, 1);
}
// also do this for the mobile overlay, regardless of its showing or not
this.loadOverlayImage(this.currImage, right);
this.checkPageBounds();
}
pGallery.prototype.resize = function() {
var self = this;
this.$list.children().each(function(){
$(this).height($(this).width());
$(this).find(".thumb-wrap").height($(this).height()-2);
});
this.fixMargins(this.currImage);
}
pGallery.prototype.imageNext = function() {
if (this.currImage == this.numThumbs)
this.changeImage("image1");
else
this.changeImage("image"+(this.currImage+1));
}
pGallery.prototype.imagePrev = function() {
if (this.currImage == 1)
this.changeImage("image"+this.numThumbs, false);
else
this.changeImage("image"+(this.currImage-1), false);
}
pGallery.prototype.pageNext = function() {
if (this.currPage < this.numPages)
this.pageChange(parseInt(this.currPage)+1);
}
pGallery.prototype.pagePrev = function() {
if (this.currPage > 1)
this.pageChange(parseInt(this.currPage)-1);
}
pGallery.prototype.pageChange = function(page, changeSlideshow) {
changeSlideshow = typeof changeSlideshow !== 'undefined' ? changeSlideshow : true;
if (page == this.currPage)
return;
this.currPage = page;
this.$pagination.children().removeClass("current");
this.$pagination.children(".p"+this.currPage).addClass("current");
// hide all thumbs, then show thumbs on current page
this.$list.children().hide();
for (var i = (this.currPage-1)*this.perPage + 1; i < Math.min(this.currPage*this.perPage+1, this.numThumbs+1); i++)
{
this.$list.children(".image" + i).show();
}
if (changeSlideshow)
{
this.changeImage("image"+this.getPageLowerBounds(this.currPage));
}
this.adjustPagination();
this.resize();
// TODO: make this all happen at the same time, and add fadein/fadeout effects
}
pGallery.prototype.checkPageBounds = function() {
// TODO: make sure we're one the right page
// (typically after hiting prev/next image)
var correctPage = this.getPageFromIndex(this.currImage);
if (correctPage != this.currPage)
{
this.pageChange(correctPage, false);
}
}
pGallery.prototype.getPageLowerBounds = function(page) {
return ((this.currPage-1)*this.perPage)+1;
}
pGallery.prototype.getPageUpperBounds = function(page) {
return this.page*this.perPage
}
pGallery.prototype.getPageFromIndex = function(index) {
return (((index-1 - ((index-1)%this.perPage))/this.perPage) +1);
}
pGallery.prototype.adjustPagination = function() {
var tempPage = parseInt(this.currPage);
var tempNumPages = this.numPages;
var totalWidth = 0;
var allowedToRemove = new Array();
this.$pagination.children().each(function(index) {
$(this).show();
totalWidth += $(this).outerWidth(true);
$(this).removeClass("current");
var thisClass = $(this).attr("class");
var thisPageNum = parseInt(thisClass.replace("p",""));
if (!(thisClass == "p-prev" || thisClass == "p-next" ||
thisPageNum == tempPage || thisPageNum == (tempPage+1) ||
thisPageNum == (tempPage-1) || thisPageNum == 1 || thisPageNum == tempNumPages ||
thisClass == "l-ell" || thisClass == "r-ell")){
allowedToRemove.push(thisPageNum);
}
});
if (this.currPage >= this.numPages){
this.$navNextButton.hide();
}
if (this.currPage <= 1){
this.$navPrevButton.hide();
}
this.$ellLeft.hide();
this.$ellRight.hide();
while (allowedToRemove.length > 0 && totalWidth > this.$pagination.width())
{
// hide pages furthest away from current page
// max two ellipsis, at the ends
// do not hide:
// current, adjacent to current, first, last
// if greater/less than current show right/left ellipses
var maxDist = 0;
var maxPage = 0;
for (var i = 0; i < allowedToRemove.length; i++)
{
if (Math.abs(allowedToRemove[i] - this.currPage) > maxDist)
{
maxDist = Math.abs(allowedToRemove[i] - this.currPage);
maxPage = i;
}
}
this.$pagination.children(".p"+allowedToRemove[maxPage]).hide();
allowedToRemove.splice(maxPage, 1);
if (allowedToRemove[maxPage] < this.currPage){
this.$ellLeft.show();
}
if (allowedToRemove[maxPage] > this.currPage){
this.$ellRight.show();
}
totalWidth = 0;
this.$pagination.children(":visible").each(function() {
totalWidth += $(this).outerWidth(true);
});
}
this.$pagination.children(".p"+this.currPage).addClass("current");
}
pGallery.prototype.mobileScreenSize = function(){
if ($(window).width() < 772){ // width in em
return true;
}
else{
return false;
}
}
pGallery.prototype.showOverlay = function(image){
// makes overlay and image appear
// loads in next and previous images
// needs next and prev buttons, close button
// need to dynamically place images to center them
// initialize swiping?
this.$mobileOverlay.show();
$("body").css("overflow", "hidden");
this.changeImage(image, true);
}
pGallery.prototype.loadOverlayImage = function(image, right){
right = typeof right !== 'undefined' ? right : true;
if (this._defaults.mobileSlide){
if (right == true){
this.$mobileThumbs.children(":visible").hide('slide', {direction: 'left'}, 300);
this.$mobileThumbs.children(".m-image"+image).show('slide', {direction: 'right'}, 300);
}
else{
this.$mobileThumbs.children(":visible").hide('slide', {direction: 'right'}, 300);
this.$mobileThumbs.children(".m-image"+image).show('slide', {direction: 'left'}, 300);
}
}
else{
this.$mobileThumbs.children(":visible").hide();
this.$mobileThumbs.children(".m-image"+image).show();
}
this.fixMargins(image);
}
pGallery.prototype.overlayImageHtml = function(image){
var self = this;
var title = this.$list.children(".image" + image).children("a").attr('title');
var medLink = this.$list.children(".image" + image).children("a").attr('href');
var $image = $("<img title='"+(title != null?title:"")+"' src='"+medLink+"'/>");
this.$mobileThumbs.children(".m-image"+image).empty().append($image);
$image.on("load", function(){
self.fixMargins(image);
});
}
pGallery.prototype.fixMargins = function(image){
// good lord fix this
var self = this;
this.$mobileThumbs.find(".m-image"+image+ " > img").each(function(i){
$(this).css("margin-left",self.realWidth($(this), true)/-2).css("margin-top",self.realHeight($(this), true)/-2);
});
}
pGallery.prototype.hideOverlay = function(){
// hide overlay
this.$mobileOverlay.hide();
$("body").css("overflow", "auto");
}
pGallery.prototype.realWidth = function(obj, limitToWindow){
var clone = obj.clone();
clone.show();
clone.css("visibility","hidden");
if (limitToWindow){
clone.css("max-width", "100%");
clone.css("max-height", "100%");
}
$('body').append(clone);
var width = clone.outerWidth();
clone.remove();
return width;
}
pGallery.prototype.realHeight = function(obj, limitToWindow){
var clone = obj.clone();
clone.show();
clone.css("visibility","hidden");
if (limitToWindow){
clone.css("max-width", "100%");
clone.css("max-height", "100%");
}
$('body').append(clone);
var height = clone.outerHeight();
clone.remove();
return height;
}
})(jQuery);
This is html code
<ul id="thumbs">
<li>
<img src="image/01.jpg" title="" />
<div class="caption">
<div class="image-title">
On Canvas 24 x 36in <p style="color:#999">Code:0000</p>
<span>*Sold..</span></div>
<div class="image-title"> <p class="fb-like" data-href="data1/polo_images/p_image_1.jpg" data-width="100" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></p>
</div>
</div>
</li>
<li>
<img src="image/02.jpg" title="" />
<div class="caption">
<div class="image-title">
On Canvas 24 x 36in <p style="color:#999">Code:0000</p>
<span>*Sold..</span></div>
<div class="image-title"> <p class="fb-like" data-href="data1/polo_images/p_image_1.jpg" data-width="100" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></p>
</div>
</div>
</li>
</ul>
</div>
I want to have lightbox open when zoom icon clicked .

How to create an simple slider using jquery(not using plug in)?

<script>
var img = function(){
$("#slider").animate({"left":"-=1775px"},10000,function(){
$("#slider").animate({"left":"0px"},10000);
img();
});
};
img();
</script>
I used animation properties in jquery but i want the loop to display the three image continuously.

I once created a small js plugin that does this, you can see the code here:
$.fn.luckyCarousel = function(options) {
var car = this;
var settings = $.extend( {
'delay' : 8000,
'transition' : 400
}, options);
car.append($('<div>').addClass('nav'));
var nav = $('.nav', car);
var cnt = $("ul", car);
var car_w = car.width();
var carItems = $('li', car);
$(cnt).width((carItems.length * car_w) + car_w);
$(carItems).each(function(i) {
var dot_active = (!i) ? ' active' : '';
$(nav).prepend($('<div>').addClass('dot dot' + i + dot_active).bind('click', function(e) {
slideSel(i);
}));
});
$(carItems).css('visibility', 'visible');
$(cnt).append($(carItems).first().clone());
car.append(nav);
var sel_i = 0;
var spin = setInterval(function() {
slideSel('auto')
}, settings.delay);
function slideSel(i) {
if (i == 'auto') {
sel_i++;
i = sel_i;
} else {
clearInterval(spin)
}
var position = $(cnt).position();
var t = car_w * -i;
var last = false;
var d = t - position.left;
if (Math.abs(t) == cnt.width() - car_w) {
sel_i = i = 0;
}
$(cnt).animate({
left: '+=' + d
}, settings.transition, function() {
$('.dot', car).removeClass('active');
$('.dot' + i, car).addClass('active');
if (!sel_i) {
$(cnt).css('left', '0');
}
});
sel_i = i;
}
}
http://plnkr.co/edit/bObWoQD8sGYTV2TEQ3r9
https://github.com/luckyape/lucky-carousel/blob/master/lucky-carousel.js
The code has been adapted to be used without plugin architecture here:
http://plnkr.co/edit/9dmfzcyEMtukAb4RAYO9
Hope it helps,
g

var Slider = new function () {
var that = this;
var Recursion = function (n) {
setTimeout(function () {
console.log(n);
$('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
if (n != 0)
Recursion(n - 1);
else
Recursion(5);
}, 3000);
};
var d = Recursion(5);
};
var Slider = new function () {
var that = this;
var Recursion = function (n) {
setTimeout(function () {
console.log(n);
$('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
if (n != 0)
Recursion(n - 1);
else
Recursion(5);
}, 3000);
};
var d = Recursion(5);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="~/JS/Ajaxcall.js"></script>
<title>Index</title>
</head>
<body>
<div style="background: rgb(255, 106, 0) none repeat scroll 0% 0%; padding: 80px;" id="slider_div">
<div id="sub_div">
<img src="~/Images/0.JPG" style="width: 100%; height: 452px;">
</div>
</div>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

How to start the popup lightbox onLoad? - javascript

Related

Iframe is not working on my website while working on local

Make Fullpage-Scroll-Script less static

code does not work outside jsfiddle

Add Lightbox in my code

How to create an simple slider using jquery(not using plug in)?

Categories

Resources