Slideshow transition between the pictures

Slideshow transition between the pictures - javascript

How do I make some nice slow transition between the pictures in this slideshow?
var slide = document.getElementById('slide');
var right_button = document.getElementById('arrow_right');
var left_button = document.getElementById('arrow_left');
var circle1 = document.getElementById('circle1');
var circle2 = document.getElementById('circle2');
var circle3 = document.getElementById('circle3');
var circle4 = document.getElementById('circle4');
var slike = ["slike/slide_1.png", "slike/slide_2.jpg", "slike/slide_3.jpg", "slike/slide_4.jpg"];
counter = 0;
right_button.onclick = function() {
if (counter + 1 >= slike.length) {
counter = 0;
}
else {
counter++;
}
picChange(counter);
}
left_button.onclick = function() {
if (counter <= 0) {
counter = slike.length -1;
}
else {
counter--;
}
picChange(counter);
}
function picChange(counter) {
circle1.src = "slike/circle.png";
circle2.src = "slike/circle.png";
circle3.src = "slike/circle.png";
circle4.src = "slike/circle.png";
if (counter == 0) {
slide.src = "slike/slide_1.png";
circle1.src = "slike/active.png";
}
else if (counter == 1) {
slide.src = "slike/slide_2.jpg";
circle2.src = "slike/active.png";
}
else if (counter == 2) {
slide.src = "slike/slide_3.jpg";
circle3.src = "slike/active.png";
}
else {
slide.src = "slike/slide_4.jpg";
circle4.src = "slike/active.png";
}
}
<img src="slike/arrow_left.png" id="arrow_left">
<img src="slike/arrow_right.png" id="arrow_right">
<img src="slike/slide_1.png" id="slide">
<div id="circles">
<img src="slike/active.png" id="circle1">
<img src="slike/circle.png" id="circle2">
<img src="slike/circle.png" id="circle3">
<img src="slike/circle.png" id="circle4">
</div>

Related

Issue with Load More button

I am having some issues with a custom slider on a WordPress website.
The slider works properly for some of the products, however, the same slider does not work on products which are loaded after a "Load More" button.
This is how the content is generated.
<div class="new_full_image-slider">
<div class="full_image-slider">
<div class="slider">
<div class="item_new_slide">
<?php the_post_thumbnail('medium_large') ?>
</div>
<?php foreach ( $attachment_ids as $attachment_id ) { ?>
<div class="item_new_slide" style="display:none;">
<img src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" class="attachment-medium_large size-medium_large wp-post-image" alt="">
</div>
<?php } ?>
</div>
<div class="slider-dots">
<a class="prev">❮</a>
<span class="slider-dots_item"></span>
<?php foreach ( $attachment_ids as $attachment_id ) { ?>
<span class="slider-dots_item"></span>
<?php } ?>
<a class="next">❯</a>
</div>
</div>
</div>
The JavaScript which updates the classes and styles:
function custom_js_slider(slider) {
var slideIndex = 1;
var slides = slider.querySelectorAll('.item_new_slide');
var dots = slider.querySelectorAll('.slider-dots_item');
dots = Array.prototype.slice.call(dots);
var prev = slider.querySelector('.prev');
var next = slider.querySelector('.next');
var track = slider.querySelector('.slider');
function showSlides(n) {
slideIndex = n;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
showSlides(slideIndex);
prev.addEventListener('click', function(event) {
showSlides(slideIndex - 1);
});
next.addEventListener('click', function(event) {
showSlides(slideIndex + 1);
});
for(var i = 0; i<dots.length; i++) {
var this_i = dots.indexOf(dots[i]);
dots[i].addEventListener('click', function(event) {
var newIndex = dots.indexOf(event.target);
newIndex++;
showSlides(newIndex);
});
}
var threshold = 50;
var startX;
var swipedir;
track.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0];
swipedir = 'none';
startX = touchobj.pageX;
//e.preventDefault();
}, false);
track.addEventListener('touchmove', function(e){
//e.preventDefault();
}, false);
track.addEventListener('touchend', function(e){
var touchobj = e.changedTouches[0];
distX = touchobj.pageX - startX;
if (Math.abs(distX) >= threshold){
swipedir = (distX < 0)? 'left' : 'right';
}
if (swipedir=='right') {
showSlides(slideIndex-1);
} else if (swipedir=='left') {
showSlides(slideIndex+1);
}
//e.preventDefault();
}, false);
}
var sliders = document.getElementsByClassName("full_image-slider");
Array.prototype.forEach.call(sliders, function(slider) {
custom_js_slider(slider);
});
And the "Load More" function:
jQuery(function ($) {
if ($('.post-listing').length > 0) {
//$('.post-listing').append('<span class="load-more"></span>');
var button = $('.post-listing .load-more');
var loading = false;
var count = $('.post-listing').data('count');
var full_count = $('.post-listing').data('full_count');
var cat_id = $('.post-listing').data('cat_id');
var cat_name = $('.post-listing').data('cat_name');
var term_link = $('.post-listing').data('term_link');
var type = $('.post-listing').data('type');
var ajax_append = $('.post-listing .ajax_append');
var scrollHandling = {
allow: true,
reallow: function () {
scrollHandling.allow = true;
},
delay: 400 //(milliseconds) adjust to the highest acceptable value
};
$('.load-more').click(function () {
loading = true;
var data = {
action: 'be_ajax_load_more',
count: count,
cat_id: cat_id,
cat_name: cat_name,
term_link: term_link,
type: type,
};
$.post(beloadmore.url, data, function (res) {
if (res.success) {
$('.ajax_append').append(res.data.objects);
loading = false;
button.removeClass('load_style');
count = count + res.data.count;
$('.post-listing').data('count', count);
if (count >= full_count) {
button.remove();
loading = true;
}
} else {
// console.log(res);
}
}).fail(function (xhr, textStatus, e) {
// console.log(xhr.responseText);
});
});
}
Could you have a look and point me to the right direction, please.
Thanks in advance.

How can i limit function-(slot play) just for 5 turn - with do/while loop

I wanna create a slot machine with 3 number by javascript - but I want to finish my function when three numbers are equal.
I think that if I write it with do/while it will be work, but I can't do it
this is my js code:
function myF() {
var slotOne = Math.floor(Math.random() * 3) + 1;
var slotTwo = Math.floor(Math.random() * 3) + 1;
var slotThree = Math.floor(Math.random() * 3) + 1;
document.getElementById("slotOne").innerHTML = slotOne;
document.getElementById("slotTwo").innerHTML = slotTwo;
document.getElementById("slotThree").innerHTML = slotThree;
if(slotOne == slotTwo && slotTwo == slotThree) {
document.getElementById("slotOne").style.backgroundColor = "#48bd48";
document.getElementById("slotTwo").style.backgroundColor = "#48bd48";
document.getElementById("slotThree").style.backgroundColor = "#48bd48";
document.getElementById("winner").classList.add("show");
}
}
this function is set onclick attr of a button tag

Adding to comment, if you want to run function for no of times then just use a counter variable to check no of attempts:
Added a reset button to reset the game.
var counter = 0;
function myF() {
if (counter != 5) {
counter++;
document.getElementById("slotLeft").innerHTML = "Try count: " + counter;
var slotOne = Math.floor(Math.random() * 3) + 1;
var slotTwo = Math.floor(Math.random() * 3) + 1;
var slotThree = Math.floor(Math.random() * 3) + 1;
document.getElementById("slotOne").innerHTML = slotOne;
document.getElementById("slotTwo").innerHTML = slotTwo;
document.getElementById("slotThree").innerHTML = slotThree;
if (slotOne == slotTwo && slotTwo == slotThree) {
document.getElementById("slotOne").style.backgroundColor = "#48bd48";
document.getElementById("slotTwo").style.backgroundColor = "#48bd48";
document.getElementById("slotThree").style.backgroundColor = "#48bd48";
document.getElementById("winner").classList.add("show");
counter = 5; // Edited this line
}
} else {
console.log('Game over');
}
}
function myF1(){
counter = 0;
document.getElementById("slotOne").innerHTML = "";
document.getElementById("slotTwo").innerHTML = "";
document.getElementById("slotThree").innerHTML = "";
}
<button onclick="myF()">Check</button>
<button onclick="myF1()">Restart Game</button>
<div id="slotLeft">
</div>
<div id="slotOne">
</div>
<div id="slotTwo">
</div>
<div id="slotThree">
</div>
<div id="winner">
</div>

function myF() {
var slotOneElem = document.getElementById("slotOne");
var slotTwoElem = document.getElementById("slotTwo");
var slotThreeElem = document.getElementById("slotThree");
var generateRand = function() {
return Math.floor(Math.random() * 3) + 1;
}
return (function () {
var slotOne = generateRand();
var slotTwo = generateRand();
var slotThree = generateRand();
slotOneElem.innerHTML = slotOne;
slotTwoElem.innerHTML = slotTwo;
slotThreeElem.innerHTML = slotThree;
if (slotOne === slotTwo && slotTwo === slotThree) {
slotOneElem.style.backgroundColor = "#48bd48";
slotTwoElem.style.backgroundColor = "#48bd48";
slotThreeElem.style.backgroundColor = "#48bd48";
document.getElementById("winner").classList.add("show");
// Here is the win
return true;
}
return false;
})();
}
var finished = myF();
while (!finished) {
finished = myF();
}

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 .

Ext JS custom Tooltip class not working

I went of Ext's QuickTips to make this custom tooltip, that should show a tooltip when over an element with a 'my_tip' attribute.
For example,
<div class="some class" my_tip="This is my tip text">
When the page is loaded, it adds the following markup to the HTML, which is correct:
<div class="x-layer my_tool_tip_layer" id="ext-gen7" style="position: absolute; z-index: 20000; visibility: hidden; left: -10000px; top: -10000px;">
<div class="my_tool_tip" id="ext-gen8"> </div>
</div>
What should happen is when I hover the mouse over the element with the 'my_tip' attribute, it should update the above div's style attribute and replace &nbsp with the contents of the my_tip class.
Like this:
<div class="x-layer my_tool_tip_layer displayed" id="ext-gen7" style="position: absolute; z-index: 20000; visibility: visible; left: 160px; top: 30px;">
<div class="my_tool_tip" id="ext-gen8">This is my tip text</div>
</div>
I have a css file handling the styling of the tooltip, but my problem now is just getting the html to update to the correct events, which it is not doing.
Below is the javascript for the tooltip. Any help would be very much appreciated.
Thank you
myToolTips=function()
{
var mytt_ext_lyr=null;
var mytt_text_el=null;
var mytt_visible=false;
var mytt_hide_proc=null;
var mytt_show_proc=null;
var mytt_tip_text='';
var mytt_hide_delay = 10000;
var mytt_show_delay = 200;
var mytt_started = false;
var mytt_last_xy = null;
var mytt_mouse_y_offset = 20;
var mytt_track_mouse = false;
var mytt_initialized = false;
var mytt_singleton = null;
var mytt_max_search_depth = 5;
var on_over = function(evt) {
var target = evt.target;
var depth = 0;
while (target && target.nodeType == 1 && !target.getAttribute('my_tip') && depth < mytt_max_search_depth) {
++depth;
target = target.parentNode;
}
if (!target || target.nodeType != 1 || !target.getAttribute('my_tip')) {
if (mytt_visible)
hide();
return;
}
var new_tip = target.getAttribute('my_tip');
if (new_tip != mytt_tip_text && mytt_visible)
hide();
if (target.getAttribute('clip_tip') && target.getAttribute('clip_tip') == 'true') {
for (var i = 0; i < target.childNodes.length; ++i) {
var child = target.childNodes[i];
if (child.scrollWidth <= child.offsetWidth) {
return;
} else {
break;
}
}
}
if (target.getAttribute('clip_tip') && target.getAttribute('clip_tip') == 'this_node') {
if (target.scrollWidth <= target.offsetWidth)
return;
}
var mouse_xy = evt.getXY();
var tip = {mouse_xy: mouse_xy, new_tip: new_tip, target: target}
mytt_show_proc = show.defer(mytt_show_delay, mytt_singleton, [tip]);
mytt_started = true;
};
var on_move = function (evt) {
if (mytt_visible) {
if (mytt_track_mouse) {
var mouse_xy = evt.getXY();
mouse_xy[1] += mytt_mouse_y_offset;
mytt_ext_lyr.setXY(mouse_xy);
}
}
else if (mytt_started)
mytt_last_xy = evt.getXY();
};
var on_out=function(evt) {
hide();
};
var on_click = function(evt) {
var target = evt.target;
var depth = 0;
while (target && target.nodeType == 1 && !target.getAttribute('my_tip') && depth < mytt_max_search_depth) {
++depth;
target = target.parentNode;
}
if (!target || target.nodeType != 1 || !target.getAttribute('my_tip'))
hide();
};
var show=function(mytt) {
var tip=mytt.new_tip;
var mouse_xy=mytt.mouse_xy;
if(mytt_last_xy)
mouse_xy=mytt_last_xy;
if(!mytt_visible) {
if(tip) {
mytt_tip_text=tip;
mytt_text_el.update(mytt_tip_text.replace(/\[\[/g,"<").replace(/\]\]/g,">"));
}
mytt_ext_lyr.show();
mytt_ext_lyr.addClass('displayed');
mytt_visible=true;
if(!mytt_hide_proc)
mytt_hide_proc=setTimeout(hide,mytt_hide_delay);
}
var db=Ext.get(document.body);
var dw=db.getWidth();
var dh=db.getHeight();
if (mytt.target.getAttribute('top_tip') === 'true') {
var telm = Ext.get(mytt.target);
var left = telm.getLeft();
var width_diff = db.getWidth() - (left + mytt_ext_lyr.getWidth());
if (width_diff < 5)
left+=width_diff-15;
mytt_ext_lyr.dom.style.right='';
mytt_ext_lyr.dom.style.top='';
mytt_ext_lyr.dom.style.left=left+'px';
mytt_ext_lyr.dom.style.bottom=(dh-telm.getTop())+'px';
mytt_ext_lyr.sync();
}
else {
mouse_xy[1]+=mytt_mouse_y_offset;
var width_diff=db.getWidth()-(mouse_xy[0]+mytt_ext_lyr.getWidth());
if(width_diff<5)
mouse_xy[0]+=width_diff-15;
mytt_ext_lyr.setXY(mouse_xy);
}
if(mytt_show_proc) {
clearTimeout(mytt_show_proc);
mytt_show_proc=null;
}
};
var hide=function() {
mytt_ext_lyr.hide();
mytt_ext_lyr.removeClass('displayed');
mytt_visible=false;
mytt_started=false;
mytt_last_xy=null;
if(mytt_hide_proc) {
clearTimeout(mytt_hide_proc);
mytt_hide_proc=null;
}
if(mytt_show_proc) {
clearTimeout(mytt_show_proc);
mytt_show_proc=null;
}
};
return {
init:function() {
mytt_singleton=myToolTips;
if(!mytt_initialized) {
if(!Ext.isReady) {
Ext.onReady(myToolTips.init,myToolTips);
return;
}
mytt_ext_lyr=new Ext.Layer({cls:'my_tool_tip_layer',shim:true,constrain:true});
mytt_ext_lyr.fxDefaults={stopFx:true};
mytt_ext_lyr.update('<div class="my_tool_tip"> </div>');
mytt_text_el=mytt_ext_lyr.child('div.my_tool_tip');
mytt_text_el.update(' ');
var doc=Ext.get(document);
doc.on('mouseover',on_over);
doc.on('mouseout',on_out);
doc.on('mousemove',on_move);
doc.on('click',on_click);
mytt_initialized=true;
}
},
ready:function() {
return mytt_initialized;
}
};
}();
// make tooltips work
myToolTips.init();

Why doesn't this mouseover/rollover work?

I have 3 images (pic1, pic2, pic3) that on click of the div ID change to (pic4, pic5, pic6). All this works fine but I need to put in a mouseover command that when hovering over pic2, it changes to pic 7 and on mouseout it goes back to pic 2. I am unsure as to why this part of my code isn't working, is it a syntax error? The two functions I am trying to use to do this are "rolloverImage" and "init".
HTML
<div id="content1">
<img src="pic1.jpg" alt="pic1"/>
<img src="pic2.jpg" alt="pic2" id="pic2"/>
<img src="pic3.jpg" alt="pic3"/>
</div>
Javascript
var g = {};
//Change background colors every 20 seconds
function changebackground() {
var backColors = ["#6AAFF7", "#3AFC98", "#FC9B3A", "#FF3030", "#DEDEDE"];
var indexChange = 0;
setInterval(function() {
var selectedcolor = backColors[indexChange];
document.body.style.background = selectedcolor;
indexChange = (indexChange + 1) % backColors.length;
}, 20000);
}
function rolloverImage(){
if (g.imgCtr == 0){
g.pic2.src = g.img[++g.imgCtr];
}
else {
g.pic2.src = g.img[--g.imgCtr];
}
}
function init(){
g.img = ["pic2.jpg", "pic7.jpg"];
g.imgCtr = 0;
g.pic2 = document.getElementById('pic2');
g.pic2.onmouseover = rolloverImage;
g.pic2.onmouseout = rolloverImage;
}
window.onload = function() {
var picSets = [
["pic1.jpg", "pic2.jpg", "pic3.jpg"],
["pic4.jpg", "pic5.jpg", "pic6.jpg"],
];
var currentSetIdx = 0;
var contentDiv = document.getElementById("content1");
var images = contentDiv.querySelectorAll("img");
refreshPics();
contentDiv.addEventListener("click", function() {
currentSetIdx = (currentSetIdx + 1) % picSets.length;
refreshPics();
});
function refreshPics() {
var currentSet = picSets[currentSetIdx];
var i;
for(i = 0; i < currentSet.length; i++) {
images[i].src = currentSet[i];
}
}
changebackground();
init();
}

We Keep Coding

JavaScript is the programming language of the Web.

Slideshow transition between the pictures - javascript

Related

Issue with Load More button

How can i limit function-(slot play) just for 5 turn - with do/while loop

Add Lightbox in my code

Ext JS custom Tooltip class not working

Why doesn't this mouseover/rollover work?

Categories

Resources