iFrame popup on thumbnail click - javascript

I've got this script which fetches thumbnails from the Twitch API, and onclick of the thumbnail it opens up an iFrame with the actual stream. How can I make the iFrame popup in the middle of the screen and everything else becomes darker?
$('.games > div').click((e) => {
var gameDiv = $(this);
$('#twitch').children().fadeOut(500).promise().then(function() {
$('#twitch').empty();
var gameName = $(e.target).text().replace(' ', '%20');
console.log(gameName);
var twitchApi = "https://api.twitch.tv/kraken/streams?game=" +gameName;
$.getJSON(twitchApi, function(json) {
setData(json.streams)
});
function setData(twitchData) {
var i = 0;
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length; for
(; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>');
$('#twitch').append(img);
img.click(function() {
$('#twitch iframe').remove()
$('#twitchframe').append( '<iframe frameborder= src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
});
}
}
$('#load').click(function() {
setData();
});
});
});

This code works for me
<div class="overlay">
<iframe src="iframe-src-url"></iframe>
</div>
<style>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.74); /* semi-transparent background */
text-align: center;
display: none; /* hide this by default */
}
.overlay iframe {
margin: 30px auto;
}
</style>
Javascript code
function setData(twitchData) {
var i = 0;
var j = twitchData.length > (i + 9) ? (i + 9) : twitchData.length; for
(; i < j; i++) {
var streamGame = twitchData[i].game;
var streamThumb = twitchData[i].preview.medium;
var streamVideo = twitchData[i].channel.name;
var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>');
$('#twitch').append(img);
img.click(function() {
$('#twitch iframe').remove()
// append it to the overlay then show
$('.overlay').append( '<iframe frameborder= src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>').show();
});
}
}
Hope this works for you
$('h1').click(function() {
$('.overlay').append('<iframe src="iframe-src-url"></iframe>').show();
});
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.74); /* semi-transparent background */
text-align: center;
display: none; /* hide the overlay by default */
}
.overlay iframe {
margin: 30px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Sample text</h1>
<div class="overlay"></div>

Related

Change the color of new added element by jQuery

this is my code:
jQuery(document).on('change', 'input[type=color]', function(picker) {
var color_chng = jQuery(this).closest('.input-group').attr('id');
jQuery('.card-txt[id=p' + color_chng + ']').css('color', picker.currentTarget.value);
});
jQuery(document).ready(function() {
var img_url = jQuery("#pro-image").attr('src');
jQuery(".edit-image").css('background', 'url(' + img_url + ')');
jQuery(".hide-img").attr('src', img_url);
jQuery(".edit-btn").find(".elementor-button-link").click(function() {
jQuery(".edit-box").show();
});
//input keyup
jQuery(document).on('keydown, keyup', '.input-group input[type="text"]', function() {
var texInputValue = jQuery(this).val();
var input_id = jQuery(this).parent().attr('id');
jQuery('.edit-image span[id=p' + input_id + ']').html(texInputValue);
});
// Draggable
(function(jQuery) {
jQuery.fn.drags = function(opt) {
opt = jQuery.extend({
handle: "",
cursor: "move"
}, opt);
if (opt.handle === "") {
var jQueryel = this;
} else {
var jQueryel = this.find(opt.handle);
}
return jQueryel.css('cursor', opt.cursor).on("mousedown", function(e) {
if (opt.handle === "") {
var jQuerydrag = jQuery(this).addClass('draggable');
} else {
var jQuerydrag = jQuery(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = jQuerydrag.css('z-index'),
drg_h = jQuerydrag.outerHeight(),
drg_w = jQuerydrag.outerWidth(),
pos_y = jQuerydrag.offset().top + drg_h - e.pageY,
pos_x = jQuerydrag.offset().left + drg_w - e.pageX;
jQuerydrag.css('z-index', 1000).parents().on("mousemove", function(e) {
jQuery('.draggable').offset({
top: e.pageY + pos_y - drg_h,
left: e.pageX + pos_x - drg_w
}).on("mouseup", function() {
jQuery(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if (opt.handle === "") {
jQuery(this).removeClass('draggable');
} else {
jQuery(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);
jQuery('.draggble').drags();
// Duplicate
var buttonAdd = jQuery(".addtxt");
var buttonRemove = jQuery(".removetxt");
var className = ".input-group";
var className2 = ".card-txt";
var count = 0;
var field = "";
var field2 = "";
var maxFields = 5;
function totalFields() {
return jQuery(className).length;
}
function addNewField() {
count = totalFields() + 1;
field2 = jQuery("#ptxtgrp1").clone();
field2.attr("id", "ptxtgrp" + count);
field2.html("");
field2.attr('style', '');
jQuery(field2).drags();
field = jQuery("#txtgrp1").clone();
field.attr("id", "txtgrp" + count);
field.find("input").val("");
jQuery(className + ":last").after(jQuery(field));
jQuery(className2 + ":last").after(jQuery(field2));
count++;
}
function removeLastField() {
if (totalFields() > 1) {
jQuery(className + ":last").remove();
jQuery(className2 + ":last").remove();
}
}
function enableButtonRemove() {
if (totalFields() === 2) {
buttonRemove.removeAttr("disabled");
buttonRemove.addClass("shadow-sm");
}
}
function disableButtonRemove() {
if (totalFields() === 1) {
buttonRemove.attr("disabled", "disabled");
buttonRemove.removeClass("shadow-sm");
}
}
function disableButtonAdd() {
if (totalFields() === maxFields) {
buttonAdd.attr("disabled", "disabled");
buttonAdd.removeClass("shadow-sm");
}
}
function enableButtonAdd() {
if (totalFields() === (maxFields - 1)) {
buttonAdd.removeAttr("disabled");
buttonAdd.addClass("shadow-sm");
}
}
buttonAdd.on("click", function() {
addNewField();
enableButtonRemove();
disableButtonAdd();
});
buttonRemove.on("click", function() {
removeLastField();
disableButtonRemove();
enableButtonAdd();
});
// Hide Show Texts
jQuery(document).on('click', '.show', function() {
var txt_id = jQuery(this).parent().attr('id');
jQuery(".card-txt[id=p" + txt_id + "]").toggle();
jQuery(this).toggleClass("hide");
});
// Font Size Change
jQuery(".input-group").each(function() {
jQuery(document).on('click', '.font-up', function() {
var ftxt_id = jQuery(this).parent().attr('id');
var size = jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size");
size = parseInt(size, 10);
if ((size + 2) <= 70) {
jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size", "+=2");
}
});
jQuery(document).on('click', '.font-down', function() {
var ftxt_id = jQuery(this).parent().attr('id');
var size = jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size");
size = parseInt(size, 10);
if ((size - 2) >= 12) {
jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size", "-=2");
}
});
});
});
.edit-box {
width: 600px;height:300px;
margin: 0 auto;
display: block;
border: 2px solid #dddddd;
border-radius: 10px;
background: #eee;
}
body {
height: 3000px;
}
/***************************/
.edit-image {
background-size: cover;
width: max-content;
display: block;
background: red;
margin: 40px auto;
position: relative;width:200px;height:200px;backgrounf:red;
}
.edit-contents {
width: 80%;
display: block;
margin: 20px auto;
background: #fff;
padding: 20px;
}
.card-txt {
position: absolute;
top: 50%;
left: 50%;
}
.show,
.font-up,
.font-down {
background: green;
width: 20px;
height: 20px;
display: inline-block;
color: #fff;
margin: 0 5px;
font-size: 16px;
cursor: pointer;
}
.addtxt,
.removetxt {
margin: 10px;
display: inline;
}
.show.hide {
background: red;
}
[type='color'] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
padding: 0;
width: 15px;
height: 15px;
border: none;
}
[type='color']::-webkit-color-swatch-wrapper {
padding: 0;
}
[type='color']::-webkit-color-swatch {
border: none;
}
.color-picker {
padding: 10px 15px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: #f8f9f9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="edit-box">
<div class="edit-image">
<img class="hide-img" src="" style="visibility: hidden;" />
<span class="card-txt draggble" id="ptxtgrp1"></span>
</div>
<div class="edit-contents">
<button type="button" class="addtxt">Add</button>
<button type="button" class="removetxt">remove</button>
<div class="input-group" id="txtgrp1">
<input class="inptxt" type="text">
<i class="show"></i>
<i class="font-up">+</i>
<i class="font-down">-</i>
<span class="color-picker">
<label for="colorPicker">
<input type="color" value="#1DB8CE" class="colorPicker" >
</label>
</span>
</div>
</div>
</div>
as you can see I need to add new texts dynamically to the "edit-image" box and I need users to change the size and color of added texts.
the first input box that already exists in DOM change color works fine
but when I add another input box by jquery codes the change color function doesn't work for it
I would be thankful if you can help me to find out the reason and resolve the issue

HTML, CSS, JS Array elements deleting after values changing in function

This is a card game I am making. The codepen is at LINK
I am currently working on the battle functionality of it but this happened. There are supposed to be 4 cards. This is what I want it to look like. Whenever I call the setup function, strange things happen. Please check the codepen for what I want see.
Link for what I want it to look like
var turn = true;
var enemyCards = document.getElementById('enemy-cards');
var friendlyCards = document.getElementById('friendly-cards');
var friendlyHealth = document.getElementById('friendly-health-value');
var enemyHealth = document.getElementById('enemy-health-value');
var enemyCardArray = [[2, 3], [2, 4]];
var friendlyCardArray = [[3, 3], [3,2]];
function initialSetup() {
for (var i=0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
enemyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
}
for (var i=0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>"
}
}
function setup() {
for (var i=0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
enemyCards.innerHTML = "";
enemyCards.innerHTML+="<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>";
}
for (var i=0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
friendlyCards.innerHTML = "";
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>";
}
}
function battle() {
if (turn === true){
for (var i = 0; i<friendlyCardArray.length; i++) {
if (friendlyCardArray.length == enemyCardArray.length){
enemyCardArray[i][1] -= friendlyCardArray[i][0];
}else{
}
}
}else if (turn === false){
}
}
initialSetup();
battle();
setup();
body {
margin: 0;
font-family: sans-serif;
position: relative;
}
#enemy-cards{
background-color: #873a00;
width: 100%;
height: 270px;
}
#friendly-cards{
background-color: #873a00;
width: 100%;
height: 270px;
position: fixed;
bottom: 0;
}
.card {
width: 150px;
height: 250px;
background-color: #afafaf;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
position: relative;
float:left;
}
.damage {
text-align: left;
position: absolute;
bottom:0;
left: 20px;
}
.health {
text-align: right;
position: absolute;
bottom:0;
right: 20px;
}
#friendly-health{
float:left;
width: 50%;
background-color: lightgreen;
height: 200px;
}
#friendly-health-value{
position: fixed;
left: 25%;
vertical-align: middle;
color: white;
}
#enemy-health-value{
position: fixed;
left: 75%;
vertical-align: middle;
color: white;
}
#enemy-health{
float:left;
width: 50%;
background-color: #f73f27;
height: 200px;
}
<div id="game">
<div id="enemy-cards">
</div>
<div id="health">
<div id="friendly-health">
<h1 id="friendly-health-value">20</h1>
</div>
<div id="enemy-health">
<h1 id="enemy-health-value">20</h1>
</div>
</div>
<div id="friendly-cards">
</div>
</div>
Looked at your setup function. It appears the problem is that you are setting innerHTML="" inside the for loop. Probably, you want to set it at the beginning of the setup() function like below:
function setup() {
enemyCards.innerHTML = "";//<--Set it to "" here, not in for loop
friendlyCards.innerHTML = "";//<--Set it to "" here, not in for loop
for (var i = 0; i < enemyCardArray.length; i++) {
var card = enemyCardArray[i]
var damage = card[0];
var health = card[1];
//enemyCards.innerHTML = "";
enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
}
for (var i = 0; i < friendlyCardArray.length; i++) {
var card = friendlyCardArray[i]
var damage = card[0];
var health = card[1];
//friendlyCards.innerHTML = "";
friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>";
}
}

On hover main image, width is not applying on zoom image please refer my attached image below

On hover main image, the zoom image should display its properties like the specified width and height. Code is working but, the problem in zoom image on hover main image.
/* This is my script. I have used this for my code in this, marksize indicates id="mark" in my html main image and zoomImg indicates width and height for on hover the main image. */
$(function(){
$("#show").simpleZoom({
zoomBox : "#zoom",
markSize : \[120, 169\],
zoomSize : \[800, 400\],
zoomImg : \[480, 677\]
});
});
(function($){
$.fn.simpleZoom = function(options){
var defs = {
markSize : \[200, 100\],
zoomSize : \[400, 400\],
zoomImg : \[800, 800\]
};
var opt = $.fn.extend({}, defs, options);
return this.each(function(){
var markBox = $(this);
var zoomBox = $(opt.zoomBox);
var zoom_img = $(opt.zoomBox).find("img");
var markBoxSize = \[markBox.width(), markBox.height(), markBox.offset().left, markBox.offset().top\];
var markSize = opt.markSize;
var zoomSize = opt.zoomSize;
var zoomImg = opt.zoomImg;
var mark_ele = "<i id='mark'></i>";
var mark_css = {position:"absolute", top:0, left:0, width:markSize\[0\]+"px", height:markSize\[1\]+"px", backgroundColor:"#000", opacity:.5, filter:"alpha(opacity=50)", display:"none", cursor:"crosshair"};
var show_w = markBoxSize\[0\]-markSize\[0\];
var show_h = markBoxSize\[1\]-markSize\[1\];
//created mark element and add cascading style sheets
zoomBox.css({width:zoomSize\[0\]+"px", height:zoomSize\[1\]+"px"});
markBox.append(mark_ele);
$("#mark").css(mark_css);
markBox.mouseover(function(){
$("#mark").show();
zoomBox.show();
}).mouseout(function(){
$("#mark").hide();
zoomBox.hide();
}).mousemove(function(e){
var l = e.pageX-markBoxSize\[2\]-(markSize\[0\]/2);
var t = e.pageY-markBoxSize\[3\]-(markSize\[1\]/2);
if(l < 0){
l = 0;
}else if(l > show_w){
l = show_w;
}
if(t < 0){
t = 0;
}else if(t > show_h){
t = show_h;
}
$("#mark").css({left:l+"px", top:t+"px"});
var z_x = -(l/show_w)*(zoomImg\[0\]-zoomSize\[0\]);
var z_y = -(t/show_h)*(zoomImg\[1\]-zoomSize\[1\]);
zoom_img.css({left:z_x+"px", top:z_y+"px"});
});
});
}
})(jQuery);
#show {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
left: 0;
}
#show_mark {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background-color: #000;
opacity: .5;
filter: alpha(opacity=50);
cursor: crosshair;
border: 1px solid #999;
display: none;
}
#zoom {
position: absolute;
left: 250px;
top: 0;
z-index: 99;
/*width: 400px;*/
height: 400px;
display: none;
overflow: hidden;
border: 1px solid #eee;
}
#zoom img {
position: absolute;
left: 0;
top: 0;
}
#show_pic{
display: block !important;
width: 60% !important;
height: 400px !important;
margin: 0 0 0 21%;
}
<div class="main">
<div id="show">
<img src="<?php echo 'data:image;base64,'.$productimage; ?>" id="show_pic" />
</div>
<div id="zoom">
<img src="<?php echo 'data:image;base64,'.$productimage; ?>"/>
</div>
</div>
The above shown is my image. Please refer and help me out soon.
Instead of the above code i have done with this and it's working fine.
HTML code
<div class="bzoom_wrap">
<ul id="bzoom">
<li>
<img class="bzoom_thumb_image" src="saree.jpeg" />
<img class="bzoom_big_image" src="saree.jpeg"/>
</li>
<li>
<img class="bzoom_thumb_image" src="saree1.jpeg"/>
<img class="bzoom_big_image" src="saree1.jpeg"/>
</li>
<li>
<img class="bzoom_thumb_image" src="saree2.jpeg"/>
<img class="bzoom_big_image" src="saree2.jpeg"/>
</li>
</ul>
</div>
Scripts i have used
<script type="text/javascript">
$("#bzoom").zoom({
zoom_area_width: 400,
autoplay_interval: 3000,
small_thumbs: 3,
autoplay: false
});
</script>
<script>
(function ($) {
$.fn.zoom = function (options) {
var _option = {
align: "left",
thumb_image_width: 380,
thumb_image_height: 400,
source_image_width: 450,
source_image_height: 450,
zoom_area_width: 400,
zoom_area_height: "justify",
zoom_area_distance: 10,
zoom_easing: true,
click_to_zoom: false,
zoom_element: "auto",
show_descriptions: true,
description_location: "bottom",
description_opacity: 0.7,
small_thumbs: 3,
smallthumb_inactive_opacity: 1,
smallthumb_hide_single: true,
smallthumb_select_on_hover: false,
smallthumbs_position: "bottom",
show_icon: true,
hide_cursor: false,
// speed: 600,
autoplay: true,
// autoplay_interval: 6000,
keyboard: true,
right_to_left: false,
}
if (options) {
$.extend(_option, options);
}
var $ul = $(this);
if ($ul.is("ul") && $ul.children("li").length && $ul.find(".bzoom_big_image").length) {
$ul.addClass('bzoom clearfix').show();
var $li = $ul.children("li").addClass("bzoom_thumb"),
li_len = $li.length,
autoplay = _option.autoplay;
$li.first().addClass("bzoom_thumb_active").show();
if (li_len < 2) {
autoplay = false;
}
$ul.find(".bzoom_thumb_image").css({width: _option.thumb_image_width, height: _option.thumb_image_height}).show();
var scalex = _option.thumb_image_width / _option.source_image_width,
scaley = _option.thumb_image_height / _option.source_image_height,
scxy = _option.thumb_image_width / _option.thumb_image_height;
var $bzoom_magnifier, $bzoom_magnifier_img, $bzoom_zoom_area, $bzoom_zoom_img;
if (!$(".bzoom_magnifier").length) {
$bzoom_magnifier = $('<li class="bzoom_magnifier"><div class=""><img src="" /></div></li>');
$bzoom_magnifier_img = $bzoom_magnifier.find('img');
$ul.append($bzoom_magnifier);
$bzoom_magnifier.css({top: top, left: left});
$bzoom_magnifier_img.attr('src', $ul.find('.bzoom_thumb_active .bzoom_thumb_image').attr('src')).css({width: _option.thumb_image_width, height: _option.thumb_image_height});
$bzoom_magnifier.find('div').css({width: _option.thumb_image_width * scalex, height: _option.thumb_image_height * scaley});
}
if (!$('.bzoom_zoom_area').length) {
$bzoom_zoom_area = $('<li class="bzoom_zoom_area"><div><img class="bzoom_zoom_img" /></div></li>');
$bzoom_zoom_img = $bzoom_zoom_area.find('.bzoom_zoom_img');
var top = 0,
left = 0;
$ul.append($bzoom_zoom_area);
if (_option.align == "left") {
top = 0;
left = 0 + _option.thumb_image_width + _option.zoom_area_distance;
}
$bzoom_zoom_area.css({top: top, left: left});
$bzoom_zoom_img.css({width: _option.source_image_width, height: _option.source_image_height});
}
var autoPlay = {
autotime: null,
isplay: autoplay,
start: function () {
if (this.isplay && !this.autotime) {
this.autotime = setInterval(function () {
var index = $ul.find('.bzoom_thumb_active').index();
changeLi((index + 1) % _option.small_thumbs);
}, _option.autoplay_interval);
}
},
stop: function () {
clearInterval(this.autotime);
this.autotime = null;
},
restart: function () {
this.stop();
this.start();
}
}
var $small = '';
if (!$(".bzoom_small_thumbs").length) {
var top = _option.thumb_image_height + 10,
width = _option.thumb_image_width,
smwidth = (_option.thumb_image_width / _option.small_thumbs) - 10,
smheight = smwidth / scxy,
ulwidth =
smurl = '',
html = '';
for (var i = 0; i < _option.small_thumbs; i++) {
smurl = $li.eq(i).find('.bzoom_thumb_image').attr("src");
if (i == 0) {
html += '<li class="bzoom_smallthumb_active"><img src="' + smurl + '" alt="small" style="width:' + smwidth + 'px; height:' + smheight + 'px;" /></li>';
} else {
html += '<li style="opacity:1;"><img src="' + smurl + '" alt="small" style="width:' + smwidth + 'px; height:' + smheight + 'px;" /></li>';
}
}
$small = $('<li class="bzoom_small_thumbs" style="top:' + top + 'px; width:' + width + 'px;"><ul class="clearfix" style="width: 485px;">' + html + '</ul></li>');
$ul.append($small);
$small.delegate("li", "click", function (event) {
changeLi($(this).index());
autoPlay.restart();
});
autoPlay.start();
}
function changeLi(index) {
$ul.find('.bzoom_thumb_active').removeClass('bzoom_thumb_active').stop().animate({opacity: 0}, _option.speed, function () {
$(this).hide();
});
$small.find('.bzoom_smallthumb_active').removeClass('bzoom_smallthumb_active').stop().animate({opacity: _option.smallthumb_inactive_opacity}, _option.speed);
$li.eq(index).addClass('bzoom_thumb_active').show().stop().css({opacity: 0}).animate({opacity: 1}, _option.speed);
$small.find('li:eq(' + index + ')').addClass('bzoom_smallthumb_active').show().stop().css({opacity: _option.smallthumb_inactive_opacity}).animate({opacity: 1}, _option.speed);
$bzoom_magnifier_img.attr("src", $li.eq(index).find('.bzoom_thumb_image').attr("src"));
}
_option.zoom_area_height = _option.zoom_area_width / scxy;
$bzoom_zoom_area.find('div').css({width: _option.zoom_area_width, height: _option.zoom_area_height});
$li.add($bzoom_magnifier).mousemove(function (event) {
var xpos = event.pageX - $ul.offset().left,
ypos = event.pageY - $ul.offset().top,
magwidth = _option.thumb_image_width * scalex,
magheight = _option.thumb_image_height * scalex,
magx = 0,
magy = 0,
bigposx = 0,
bigposy = 0;
if (xpos < _option.thumb_image_width / 2) {
magx = xpos > magwidth / 2 ? xpos - magwidth / 2 : 0;
} else {
magx = xpos + magwidth / 2 > _option.thumb_image_width ? _option.thumb_image_width - magwidth : xpos - magwidth / 2;
}
if (ypos < _option.thumb_image_height / 2) {
magy = ypos > magheight / 2 ? ypos - magheight / 2 : 0;
} else {
magy = ypos + magheight / 2 > _option.thumb_image_height ? _option.thumb_image_height - magheight : ypos - magheight / 2;
}
bigposx = magx / scalex;
bigposy = magy / scaley;
$bzoom_magnifier.css({'left': magx, 'top': magy});
$bzoom_magnifier_img.css({'left': -magx, 'top': -magy});
$bzoom_zoom_img.css({'left': -bigposx, 'top': -bigposy});
}).mouseenter(function (event) {
autoPlay.stop();
$bzoom_zoom_img.attr("src", $(this).find('.bzoom_big_image').attr('src'));
$bzoom_zoom_area.css({"background-image": "none"}).stop().fadeIn(400);
$ul.find('.bzoom_thumb_active').stop().animate({'opacity': 0.5}, _option.speed * 0.7);
$bzoom_magnifier.stop().animate({'opacity': 1}, _option.speed * 0.7).show();
}).mouseleave(function (event) {
$bzoom_zoom_area.stop().fadeOut(400);
$ul.find('.bzoom_thumb_active').stop().animate({'opacity': 1}, _option.speed * 0.7);
$bzoom_magnifier.stop().animate({'opacity': 0}, _option.speed * 0.7, function () {
$(this).hide();
});
autoPlay.start();
})
}
}
})(jQuery);
</script>
My style sheet
<style>
.bzoom { direction: ltr; }
.bzoom,
.bzoom_thumb,
.bzoom_thumb_image,
.bzoom_big_image,
.bzoom_zoom_preview,
.bzoom_icon,
.bzoom_hint { display: none }
.bzoom,
.bzoom ul,
.bzoom li,
.bzoom img,
.bzoom_hint,
.bzoom_icon,
.bzoom_description {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.bzoom,
.bzoom_magnifier div,
.bzoom_magnifier div img,
.bzoom_small_thumbs ul,
ul .bzoom_small_thumbs li,
.bzoom_zoom_area div,
.bzoom_zoom_img { position: relative; }
.bzoom img,
.bzoom li {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;
}
.bzoom,
.bzoom_small_thumbs li { float: left; }
.bzoom_right { float: right;}
.bzoom li {
position: absolute;
border: 1px solid #cfcece;
}
.bzoom img {
vertical-align: bottom;
width: 50px;
height: 70px;
border: 1px solid #eaeaea;
}
.bzoom .bzoom_zoom_area,
.bzoom_zoom_area {
background: #fff url(./img/loading.gif) center no-repeat;
border: 1px solid #ddd;
padding: 6px;
-webkit-box-shadow: 0 0 10px #ddd;
-moz-box-shadow: 0 0 10px #ddd;
box-shadow: 0 0 10px #ddd;
display: none;
z-index: 20;
}
.bzoom_zoom_area div { overflow: hidden; }
.bzoom_zoom_area .bzoom_zoom_img { position: absolute; }
.bzoom_wrap .bzoom_magnifier {
background: #fff;
outline: #bbb solid 1px;
display: none;
cursor: move;
}
.bzoom_magnifier div { overflow: hidden; }
.bzoom_wrap .bzoom_small_thumbs { overflow: hidden; }
.bzoom_wrap .bzoom_small_thumbs li {
border: 1px solid #FFF;
margin: 0px 10px 0px 0px;
position: relative;
border: 1px solid #cfcece;
}
.bzoom_wrap ul li.bzoom_smallthumb_active {
-webkit-box-shadow: 0 0 10px #ddd;
-moz-box-shadow: 0 0 10px #ddd;
box-shadow: 0 0 10px #ddd;
border: 1px solid #535353;
}
</style>

Cannot pass numerical ID in function

I want make a multiply chating system like facebook. So I collect this script from this webpage
In this script they are passing 2 variable in register_popup function as id and name. Now if I pass any numerical value as id for twice or more, this script not working. But for a new numerical value work well.
So I want to sand my usersID as ID and UserNAME as NAME for further process. How can I solve this? Here is this script:
<a class="content" href="#" id="Aaa" data-name="aaa">AAA</a><br>
<a class="content" href="#" id="1013" data-name="bbb">BBB</a><br>
<a class="content" href="#" id="1014" data-name="ccc">CCC</a>
<script>
$(document).on('click', 'a.content', function() {
var ID = $(this).attr("id");
var NAME = $(this).data("name");
register_popup(ID, NAME);
});
//this function can remove a array element.
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};
//this variable represents the total number of popups can be displayed according to the viewport width
var total_popups = 0;
//arrays of popups ids
var popups = [];
//this is used to close a popup
function close_popup(id) {
for (var iii = 0; iii < popups.length; iii++) {
if (id == popups[iii]) {
Array.remove(popups, iii);
document.getElementById(id).style.display = "none";
calculate_popups();
return;
}
}
}
//displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
function display_popups() {
var right = 220;
var iii = 0;
for (iii; iii < total_popups; iii++) {
if (popups[iii] != undefined) {
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for (var jjj = iii; jjj < popups.length; jjj++) {
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
//creates markup for a new popup. Adds the id to popups array.
function register_popup(id, name) {
for (var iii = 0; iii < popups.length; iii++) {
//already registered. Bring it to front.
if (id == popups[iii]) {
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="' + id + '">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">' + name + '</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups() {
var width = window.innerWidth;
if (width < 540) {
total_popups = 0;
} else {
width = width - 200;
//320 is width of a single popup box
total_popups = parseInt(width / 320);
}
display_popups();
}
//recalculate when window is loaded and also when window is resized.
window.addEventListener("resize", calculate_popups);
window.addEventListener("load", calculate_popups);
</script>
<style>
#media only screen and (max-width: 540px) {
.chat-sidebar {
display: none !important;
}
.chat-popup {
display: none !important;
}
}
.chat-sidebar {
width: 200px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
}
.sidebar-name {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 4px;
font-size: 12px;
}
.sidebar-name span {
padding-left: 5px;
}
.sidebar-name a {
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
.sidebar-name:hover {
background-color: #e1e2e5;
}
.sidebar-name img {
width: 32px;
height: 32px;
vertical-align: middle;
}
.popup-box {
display: none;
position: fixed;
bottom: 0px;
right: 220px;
height: 285px;
background-color: rgb(237, 239, 244);
width: 300px;
border: 1px solid rgba(29, 49, 91, .3);
}
.popup-box .popup-head {
background-color: #6d84b4;
padding: 5px;
color: white;
font-weight: bold;
font-size: 14px;
clear: both;
}
.popup-box .popup-head .popup-head-left {
float: left;
}
.popup-box .popup-head .popup-head-right {
float: right;
opacity: 0.5;
}
.popup-box .popup-head .popup-head-right a {
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages {
height: 100%;
overflow-y: scroll;
}
</style>
You could use ajax call to handle the data.
function sendData() {
$.ajax({
context:this,
type:"POST",
dataType:"json",
data: { ID: userID, NAME: UserNAME },
success: function(response){
//something
},
error: function(errorData){alert(errorData);}
});

stopping slideshow and continue after 3 seconds

I made this Slideshow with HTML/CSS/JS and I want to make it so that after I press an arrow key that the autoslide stops, I can just change pics manually and after 3 seconds it goes back into autoslide, but I cant figure out how this works. Any help is appreciated. Many thanks in advance.
JS:
var imagecount = 1;
var total = 6;
var uniqueRandoms = [];
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = imagecount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
function slide(x) {
var Image = document.getElementById('img');
imagecount = imagecount + x;
if (imagecount > total) {
imagecount = 1;
}
if (imagecount < 1) {
imagecount = total;
}
Image.src = "images/img" + imagecount + ".jpg";
ChangeText(imagecount);
}
window.setInterval(function slideA(x) {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
console.log(imagescount);
Image.src = "images/img" + imagescount + ".jpg";
ChangeText(imagescount);
}, 3000);
function ChangeText(imgNum) {
var allImagesAndText = {
1: "Seltene römische Goldmünze",
2: "Römische Funde",
3: "Römische Wandmalerei",
4: "Tutanchamun",
5: "Cheops Pyramide",
6: "Ägyptische Malerei"
};
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
CSS:
#container {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
HTML:
<div id="container">
<div id="text1">Text</div>
<img src="images/img1.jpg" id="img" />
<div id="left_holder">
<img onClick="slide(-1)" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img onClick="slide(1)" class="right" src="images/arrow_right.png" />
</div>
</div>
You need to assign your setInterval reference to a variable, so you can stop that interval using clearInterval(). Now, on every call to slide() that you use as your arrow click handlers, you need to clear the interval at the starting of function and then set it again at the end of the function.
function slide(x) {
clearInterval( sliderInterval );
var Image = document.getElementById('img');
imagecount = imagecount + x;
if (imagecount > total) {
imagecount = 1;
}
if (imagecount < 1) {
imagecount = total;
}
Image.src = "images/img" + imagecount + ".jpg";
ChangeText(imagecount);
sliderInterval = window.setInterval( slideA, 3000);
}
sliderInterval = window.setInterval( slideA, 3000);
function slideA() {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
console.log(imagescount);
Image.src = "images/img" + imagescount + ".jpg";
ChangeText(imagescount);
}
Assign setInterval to a variable:
var silderTimerID = window.setInterval(function slideA(x) {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
console.log(imagescount);
Image.src = "images/img" + imagescount + ".jpg";
ChangeText(imagescount);
}, 3000);
and then add keypress event handler:
window.addEventListener("keypress", function(e){
console.log(e);
// write your key condition code
clearInterval(silderTimerID)
});
Use clearInterval() to clear timer repeat.
please see demo:
https://jsfiddle.net/sxzety3e/1/

Categories