jquery trouble - onclick for gallery - javascript

I am trying to use image gallery for my website that I found here. I want to add one more functionality to this gallery.. I want a large image to be linked and when clicked on it to open in new tab url that is defined in code.
I have included the full code here:
<script type="text/javascript">
$(document).ready(function()
{
/*Your ShineTime Welcome Image*/
var default_image = 'images/large/default.jpg';
var default_caption = 'Welcome to my portfolio';
/*Load The Default Image*/
loadPhoto(default_image, default_caption);
function loadPhoto($url, $caption)
{
/*Image pre-loader*/
showPreloader();
var img = new Image();
jQuery(img).load( function()
{
jQuery(img).hide();
hidePreloader();
}).attr({ "src": $url });
$('#largephoto').css('background-image','url("' + $url + '")');
$('#largephoto').data('caption', $caption);
}
/* When a thumbnail is clicked*/
$('.thumb_container').click(function()
{
var handler = $(this).find('.large_image');
var newsrc = handler.attr('src');
var newcaption = handler.attr('rel');
loadPhoto(newsrc, newcaption);
});
/*When the main photo is hovered over*/
$('#largephoto').hover(function()
{
var currentCaption = ($(this).data('caption'));
var largeCaption = $(this).find('#largecaption');
largeCaption.stop();
largeCaption.css('opacity','0.9');
largeCaption.find('.captionContent').html(currentCaption);
largeCaption.fadeIn()
largeCaption.find('.captionShine').stop();
largeCaption.find('.captionShine').css("background-position","-550px 0");
largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);
Cufon.replace('.captionContent');
},
function()
{
var largeCaption = $(this).find('#largecaption');
largeCaption.find('.captionContent').html('');
largeCaption.fadeOut();
});
/* When a thumbnail is hovered over*/
$('.thumb_container').hover(function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
$(this).find(".large_thumb_shine").stop();
$(this).find(".large_thumb_shine").css("background-position","-99px 0");
$(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
}, function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
});
function showPreloader()
{
$('#loader').css('background-image','url("images/interface/loader.gif")');
}
function hidePreloader()
{
$('#loader').css('background-image','url("")');
}
});
</script>
And I have 15 thumbnails/photos like this:
<div class="thumbnails">
<br><br><br>
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb">
<img alt="" src="images/large/sample1.jpg" class="large_image" rel="Image Sample">
<div class="large_thumb_border"> </div>
<div class="large_thumb_shine"> </div>
</div>
</div>
</div>
<!-- end entry-->
</div>
Any help? Thanks.

This should work, all you have to do is add data-large attributes to each image and on hover it displays a tooltip with the large image inside.
http://jsfiddle.net/DSjLk/

Related

How to switch images using JS?

I have a simple code that switches text when an image is clicked:
js:
$(document).ready(function() {
$('.srb').on('click', function() {
var r = $('.localization').each(function() {
var el = $(this);
var key = (el.attr('caption'));
el.text(srb[key]);
});
});
$('.eng').on('click', function() {
var r = $('.localization').each(function() {
var el = $(this);
var key = (el.attr('caption'));
el.text(eng[key]);
});
});
var srb = {
welcome: 'Добро дошли на наш сајт!'
};
var eng = {
welcome: 'Welcome to our site!'
};
});
HTML:
<span class='localization' caption='welcome'>Welcome to our site!</span>
<img src="img/Serbia.png" value='srb' class="srb" id="flag"/>
<img src="img/United-Kingdom.png" class='eng' value='eng'/>
Is it possible to switch images when language is switched (for example, when English language is set, GB flag disappears)?
Edit html like that
<img src="img/Serbia.png" value='srb' class="image_flag srb" id="flag"/>
<img src="img/United-Kingdom.png" class="image_flag eng" value="eng"/>
add class hidden element
.d-none{
display: none !important;
}
<script>
function activeImageFlag(flagActive){
document.querySelectorAll(".image_flag").forEach(function(flagImage){
flagImage.classList.add('d-none')
});
document.querySelector(".image_flag." + flagActive).classList.remove('d-none')
}
</script>

Image.load function is not being called

I'm pretty new at JavaScript / jQuery.
The below example does call the .each part for every waterfall-item in my list. But the $img.load is never called for some reason?
Can't really figure out what I'm doing wrong?
(function($) {
$(document).ready(function(e) {
var $waterfall = $('.waterfall');
if ($waterfall.length) {
$waterfall.waterfall({});
}
// sort the waterfall when images are loaded
var $waterfallItem = $('.waterfall-item');
$waterfallItem.each(function(j, image) {
var $img = $(image);
$img.load(function() {
$waterfall.waterfall({});
});
});
});
})(jQuery);
<ul class="waterfall">
<li class="waterfall-item">
<a href="hidden link" title="hidden title">
<img alt="hidden alt" title="hidden title" data-srcset="hidden in this example" data-src="also hidden in this example" src="still hidden in this example" data-sizes="(min-width:440px) 300px, 95vw" class=" lazyloaded" sizes="(min-width:440px) 300px, 95vw"
srcset="think I'll hide this one too">
<span class="waterfallImgOverlay"></span>
</a>
</li>
</ul>
Solved it like this:
var $waterfall = $('.waterfall');
if ($waterfall.length) {
$waterfall.waterfall({});
}
// sort the waterfall when images are loaded
var $waterfall_images = $waterfall.find('img');
$waterfall_images.each(function(j, image) {
var $img = $(image);
$img.load(function() {
$waterfall.waterfall({});
});
});

JQuery: Create image and div and then append image to div

I want to create an image object, then a div object, append the image to the div and finally append the result to a wrapper.
I did this:
var image = $(document.createElement('img'));
image.attr('src', url);
image.attr('id', 'preview_gallery_image_' + i);
image.addClass('admin-hotel-gallery-image');
var imageDiv = $(document.createElement('div'));
imageDiv.addClass('col-sm-3');
imageDiv.attr('id', 'preview_gallery_image_wrapper_' + i);
var imageNode = image.appendTo(imageDiv);
var finalElement = imageNode.appendTo("#gallery-wrapper");
To make it a bit clearer, the final result should look like this:
<div id="gallery-wrapper>
<div class="col-sm-3" id="preview-gallery-image-wrapper-1">
<img url="...">
</div>
</div>
What I get is only the image in the gallery wrapper, but the inner imageDiv around the image is missing:
<div id="gallery-wrapper>
<img url="...">
</div>
What am I doing wrong?
DEMO LINK
js code
var url = 'url';
var i =1 ;
var image = $('<img />', {
id:'preview_gallery_image_' + i,
class: 'admin-hotel-gallery-image' ,
src: url
});
var imageDiv = $('<div >',{
id: 'preview_gallery_image_wrapper_' + i
});
image.appendTo(imageDiv);
var finalElement = $('<div/>',{
id: 'gallery-wrapper'
});
imageDiv.appendTo(finalElement);
finalElement.appendTo('body');
result:
<div id="gallery-wrapper">
<div id="preview_gallery_image_wrapper_1">
<img src="url" class="admin-hotel-gallery-image" id="preview_gallery_image_1">
</div>
</div>

Why jQuery cycle plugin doesn't work?

I write a function to append some HTML code to page like below:
function addGiftList(className, imgURL, Kind) {
var $li = $('<li class="' + className + '">');
var $img = $("<img>", { src: imgURL })
var $br = $("<br/>");
var $input = $('<input >', { type: 'radio', name: 'gift', kind: Kind });
var $label = $("<label>").text("Test");
$li.append($img);
$li.append($br);
$li.append($input);
$li.append($label);
return $li;
}
All this will append to a div with className cycle-slideshow then I call $('.cycle-slideshow').cycle();, but nothing happens. Does anyone know why?
Can I create HTML elements with javascript then call jQuery cycle plugin?
HTML
<button>append</button>
<div class="myslider composite-example" data-cycle-fx="scrollHorz" data-cycle-slides="> div" data-cycle-timeout="2000">
<div>
<img src="http://malsup.github.io/images/p1.jpg" width=100%>
<div class="cycle-overlay">first image</div>
</div>
<div>
<img src="http://malsup.github.io/images/p2.jpg" width=100%>
<div class="cycle-overlay">second image</div>
</div>
</div>
CSS
body {
width: 200px;
margin: auto;
}
img {
width: 200px;
}
JS
// first call cycle
$('.myslider').length > 0 && $('.myslider').cycle();
function addGiftList(className, imgURL, Kind) {
var $div = $('<div class="' + className + '">');
var $img = $("<img>", {
src: imgURL
})
var $input = $('<input >', {
type: 'radio',
name: 'gift',
kind: Kind
});
var $label = $("<label>").text("Test");
$div.append($img);
$div.append($input);
$div.append($label);
// dynamically adding slider: this is a plugin method see documentation
$('.myslider').cycle('add', $div);
return;
}
// dynamic add button for example
$('button').on('click', function() {
// add function for example
addGiftList('myclass cycle-slide', 'https://placeholdit.imgix.net/~text?txtsize=15&txt=image%20added&w=200&h=150&txttrack=0');
})
Please see this link of my codepen. I have solved your problem.
http://codepen.io/prashen/pen/PNPbRR

Incorporating Image Mapster with JS Slideshow

I have a javascript slideshow with image maps associated with each of the images. See example here.
I would like to incorporate the jquery plugin, ImageMapster, to enhance the usability of the image maps. I can get the ImageMapster functions to work when the image is provided directly in the HTML (see here), but not when the images are inserted by the javascript (as in the first example).
I'm guessing I would need to embed the imagemapster script into the slideshow script so that it is called each time a new image is called. Unfortunately, I'm not sure how to do this. Here is the relevant html and JS
HTML
<div id="gallery">
<div id="imagearea">
<div id="image">
<?php include("../Images/Slides/Dog/4mmCSMaps.php"); ?>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<?php include("../PHP/Slideshows/Dog4mmCS.php"); ?>
</ul>
</div>
</div>
<script type="text/javascript">
var imgid = 'image';
var imgdir = '../Images/Slides/Dog/4mm/Transverse';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = false;
var autodelay = 5;
</script>
<script src="/CSS-JS/SlideShow_Dog.js" type="text/javascript"></script>
SlideShow JS:
var slideShow=function(){
var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
ta=document.getElementById(thumbid); ia=document.getElementById(imgid);
t=ta.getElementsByTagName('li'); ie=document.all?true:false;
st=3; ss=10; ft=10; fs=5; xp,yp=0;
return{
init:function(){
document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)};
ys=this.toppos(ta); ye=ys+ta.offsetHeight;
len=t.length;tar=[];
for(i=0;i<len;i++){
var id=t[i].value; tar[i]=id;
t[i].onclick=new Function("slideShow.getimg('"+id+"')");
if(i==0){this.getimg(id)}
}
tarl=tar.length;
},
scrl:function(d){
clearInterval(ta.timer);
var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
},
mv:function(d,l){
ta.style.left=ta.style.left||'0px';
var left=ta.style.left.replace('px','');
if(d==1){
if(l-Math.abs(left)<=ss){
this.cncl(ta.id); ta.style.left='-'+l+'px';
}else{ta.style.left=left-ss+'px'}
}else{
if(Math.abs(left)-l<=ss){
this.cncl(ta.id); ta.style.left=l+'px';
}else{ta.style.left=parseInt(left)+ss+'px'}
}
},
cncl:function(){clearTimeout(ta.timer)},//this function causes the scrolling to stop when mouse leaves scrolling area
getimg:function(id){
if(auto){clearTimeout(ia.timer)}
if(ci!=null){
var ts,tsl,x;
ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
for(x;x<tsl;x++){
if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
}
}
if(!document.getElementById(id)){
var i=document.createElement('img');
ia.appendChild(i);
i.id=id; i.av=0; i.style.opacity=0;
i.style.filter='alpha(opacity=0)';
i.src=imgdir+'/'+id+imgext;
i.useMap='#Map'+id;
}else{
i=document.getElementById(id); clearInterval(i.timer);
}
i.timer=setInterval(function(){slideShow.fdin(i)},fs);
},
nav:function(d){
var c=0;
for(key in tar){if(tar[key]==ci.id){c=key}}
if(tar[parseInt(c)+d]){
this.getimg(tar[parseInt(c)+d]);
}else{
if(d==1){
this.getimg(tar[0]);
}else{this.getimg(tar[tarl-1])}
}
},
auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
fdin:function(i){
if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
},
fdout:function(i){
i.av=i.av-fs; i.style.opacity=i.av/100;
i.style.filter='alpha(opacity='+i.av+')';
if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}}
},
lim:function(){
var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4;
bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
},
pos:function(e){
xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX;
yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
slideShow.scrl(-1);
}else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
slideShow.scrl(1);
}else{slideShow.cncl()}
},
leftpos:function(t){
var l=0;
if(t.offsetParent){
while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
}else if(t.x){l+=t.x}
return l;
},
toppos:function(t){
var p=0;
if(t.offsetParent){
while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
}else if(t.y){p+=t.y}
return p;
}
};
}();
window.onload=function(){slideShow.init(); slideShow.lim()};
Any thoughts?

Categories

Resources