I am trying to make a simple image gallery like this. http://dimsemenov.com/plugins/royal-slider/#image-gallery When I click a thumbnail image, image element will create and loading image will appear a little time and created element will slide in the visible area.At last old image elment will remove.
<div id="imageGallery" style="overflow:visible;display:block;">
<div class="preview">
<div id="content" style="width:640px;height:420px;">
<img id="main-Image" alt="" src="../../baContent/image1.jpg" style="display:inline; top:0;left:0;" />
</div>
</div>
<div id="thumbnails">
<a class="thumbnail" href="../../baContent/image1.jpg"><img alt="Image 1" src="../../baContent/image1-thumb.jpg"></a>
<a class="thumbnail" href="../../baContent/image2.jpg"><img alt="Image 2" src="../../baContent/image2-thumb.jpg"></a>
</div>
$(document).ready(function () {
$(".thumbnail").click(function () {
$("#mainImage").animate({ "left": "-640px" }, "fast");
$('#preview').css('background-image', "url('../../baContent/spinner.gif')");
var img = $("<img style='left:640px;display:none;' />").attr('src', this.href).load(function () {
$('#mainImage').attr('src', img.attr('src'));
$('#preview').css('background-image', 'none');
$(this).parent().prevAll().remove();
$("#mainImage").animate({ "left": "-640px" }, "fast");
});
});
});
I wrote a few code but had no success. Any ideas or tutorials?
Try :
$(document).ready(function () {
$(".thumbnail").click(function () {
$('#main-Image').hide();
$('#preview').css('background-image', "url('../../baContent/spinner.gif')");
var imgSrc = $(this).attr('href');
var img = $("<img style='left:640px;display:none;' />").attr('src', imgSrc).load(function () {
$('#main-Image').attr('src', imgSrc);
$('#preview').css('background-image', 'none');
$('#main-Image').fadeIn();
});
return false;
});
});
You can add all animations you want.
For a good slider, see http://bxslider.com/.
Related
I am trying to change the big image when another small image is clicked, kind of like a product display on an e-commerce website. But my code doesn't seem to work.
jQuery(document).ready(function($) {
$('.blue-button').on({
'click': function() {
$('#change-image').attr('src', 'https://cdn.shopify.com/s/files/1/0781/4423/files/02_8df18841-8d84-4a96-9611-e5a965dce73c.jpg?v=1568864598');
}
});
$('.yellow-button').on({
'click': function() {
$('#change-image').attr('src', 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/mothers-day-flower-bouquet-1588610191.jpg');
}
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-container">
<img src="https://i.pinimg.com/originals/12/e2/6d/12e26d72c68442640b27583cff8d50e7.png" class="blue-button box">
<img src="https://i.pinimg.com/originals/16/cd/d9/16cdd95fab4a41e8cbe3e1f724343f49.png" class="yellow-button box">
</div>
<img id="change-image" src="https://img.freepik.com/free-vector/beautiful-watercolour-bouquet-flowers_52683-45189.jpg?size=626&ext=jpg" />
Don't repeat JavsScript code. Instead delegate a click to every .button-container's img element:
jQuery(function($) {
const $image = $("#change-image");
$(".button-container").on("click", "img", function() {
$image.attr("src", this.src);
});
});
.button-container img {max-height: 60px;}
<div class="button-container">
<img src="https://i.pinimg.com/originals/12/e2/6d/12e26d72c68442640b27583cff8d50e7.png" class="blue-button box">
<img src="https://i.pinimg.com/originals/16/cd/d9/16cdd95fab4a41e8cbe3e1f724343f49.png" class="yellow-button box">
</div>
<img id="change-image" src="https://img.freepik.com/free-vector/beautiful-watercolour-bouquet-flowers_52683-45189.jpg?size=626&ext=jpg"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Another suggestion is not to load the fullsize images if you need thumbnails.
Store the Full-size image inside the data-* attribute of the thumbnail image:
jQuery(function($) {
const $image = $("#change-image");
$(".button-container").on("click", "img", function() {
$image.attr("src", this.dataset.src);
});
});
.button-container img {max-height: 60px;}
<div class="button-container">
<img src="https://placehold.it/50x50/0bf" data-src="https://placehold.it/250x150/0bf">
<img src="https://placehold.it/50x50/f0b" data-src="https://placehold.it/250x150/f0b">
</div>
<img id="change-image" src="https://placehold.it/250x150/0bf"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I want to change many elements (figcaption) dimensions to img dimensions with jquery
plz help me
var width = $("div[caption='true'] img").attr("width");
var height = $("div[caption='true'] img").attr("height");
$("div[caption='true'] figcaption").css("width",width);
$("div[caption='true'] figcaption").css("height",height);
jsfiddle link
Try this:
$(function() {
$("div[caption='true']").each(function() {
var $this = $(this);
var image = $this.find('img')
var width = image.width();
var height = image.height();
$this.find('figcaption').width(width).height(height);
});
});
jsFiddle: http://jsfiddle.net/8ge1wvpt/11/
Your current code is setting each figcaption's height and width to that of the first image. Try this:
$(document).ready( function() {
$("div[caption='true']").each(function() {
var $this = $(this);
var width = $("img", $this).attr("width");
var height = $("img", $this).attr("height");
$("figcaption", $this).css({"height":height, "width":width});
});
});
DEMO
Snippet below:
$(document).ready( function() {
$("div[caption='true']").each(function() {
var $this = $(this);
var width = $("img", $this).attr("width");
var height = $("img", $this).attr("height");
$("figcaption", $this).css({"height":height, "width":width});
});
});
*{margin:0;padding:0;}
.imgs{position:relative;}
figcaption{position:absolute;top:0;
background-color:rgba(0,0,0,0.4);}
figcaption h3{text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgs" caption="true">
<img src="http://goo.gl/uRvjRS" width="200" height="250" alt=""/>
<figcaption>
<h3>IMGs Caption 1</h3>
</figcaption>
</div>
<div class="imgs" caption="true">
<img src="http://goo.gl/uRvjRS" width="100" height="100" alt=""/>
<figcaption>
<h3>IMGs Caption 2</h3>
</figcaption>
</div>
<div class="imgs" caption="true">
<img src="http://goo.gl/uRvjRS" width="300" height="200" alt=""/>
<figcaption>
<h3>IMGs Caption 3</h3>
</figcaption>
</div>
You can do it by using a function to fill in the css value:
$(document).ready( function() {
$("img + figcaption")
.css("width",function() { return $(this).prev().attr("width");})
.css("height",function() { return $(this).prev().attr("height"); });
});
This will match any <img> followed by <figcaption> - there is no need for the caption="true" attribute, unless you are using it for something else.
I am using jquery to create an image rotator. I found the code below here: How to fade loop gallery background images
but I was wondering if there is a way it can fade from one image to the next instead of to white in between?
$(window).load(function(){
var initialBg = $('#mydiv').css("background-image"); // added
var firstTime = true;
var arr = [initialBg, "url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; // changed
(function recurse(counter) {
var bgImage = arr[counter];
if (firstTime == false) {
$("#mydiv").fadeOut("slow", function(){
$('#mydiv').css('background-image', bgImage); // fixed
});
$("#mydiv").fadeIn("slow");
} else {
firstTime = false;
}
delete arr[counter];
arr.push(bgImage);
setTimeout(function() {
recurse(counter + 1);
}, 3600);
})(0);
});
Give this a try: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
JSFiddle demo
HTML:
<div id="cycler">
<img class="active" src="image1.jpg" alt="My image" />
<img src="image2.jpg" alt="My image" />
<img src="image3.jpg" alt="My image" />
<img src="image4.jpg" alt="My image" />
</div>
CSS:
#cycler { position:relative; }
#cycler img { position:absolute; z-index:1 }
#cycler img.active { z-index:3 }
JavaScript:
function cycleImages() {
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(1500, function() { //fade out the top image
$active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active'); //make the next image the top one
});
}
$(document).ready(function() {
// run every 3s
setInterval(cycleImages, 3000);
});
I have the below fiddle
When I hover over prev I want it to move as it is doing and when I stop hovering I want it to stop.
See the code below. The alert works when I stop hovering but the clearInterval does not?
What am I doing wrong here?
<div> <span id="prev">prev</span>
<div class="scroll-container">
<div class="img-container">
<img src="http://dummyimage.com/100x100/000000/fff">
<img src="http://dummyimage.com/100x100/f33636/fff">
<img src="http://dummyimage.com/100x100/0c5b9e/fff">
<img src="http://dummyimage.com/100x100/0c9e0c/fff">
</div>
</div>
</div>
var hoverInterval;
function goLeft() {
if (!$('.img-container').is(':animated')) {
var first = $('.img-container img:first-child');
var firstClone = first.clone();
$('.img-container').append(firstClone);
$('.img-container').animate({
"left": "-=110px"
}, "slow", function () {
first.remove();
$('.img-container').css("left", "0");
});
}
}
$('#prev').hover(
function () {
hoverInterval = setInterval(goLeft, 100);
},
function () {
alert(1);
clearInterval(goLeft);
}
);
Change it to
clearInterval(hoverInterval);
I need Keyboard events for viewing the next and previous for a larger images. Please help me out. As I am viewing the images if am clicking on the mouse, like this I have to view the images If am clicking on left and right arrow keys too.
HTML
<div id="gallery">
<div id="overlay"></div>
<div class="slidePanel">
<div id="panel">
<img id="largeImage" src="" />
</div>
<div class="slideBtn">
<a href="#" id="next">
<img src="images/left_arrow.png" /></a>
<img src="images/right_arrow.png" />
</div>
<div id="close">Close</div>
</div>
<div id="thumbs" align="center">
<img src="images/image_01_thumb.jpg" alt="1st image description" />
<img src="images/image_02_thumb.jpg" alt="2nd image description" />
<img src="images/image_03_thumb.jpg" alt="3rd image description" />
<img src="images/image_04_thumb.jpg" alt="4th image description" />
</div>
</div>
JS
function loadSlide(nSlide)
{
$('#thumbs img.current').removeClass('current');
$(nSlide).addClass('current');
var src = $(nSlide).attr('src').replace('thumb', 'large');
$("#largeImage").fadeOut(function()
{
this.src = src;
$(this).fadeIn();
}).center();
$("#overlay").css({"opacity" : "0.7"})
.fadeIn("slow");
$('#close a, #close').fadeIn();
$('#prev, #next').css('display', 'block');
}
$('#next').click(function()
{
var cSlide = $('#thumbs img.current');
if($(cSlide).next('img').length > 0)
var nSlide = $(cSlide).next('img');
else
var nSlide = $('#thumbs img:first');
loadSlide(nSlide);
});
$('#prev').click(function()
{
var cSlide = $('#thumbs img.current');
if($(cSlide).prev('img').length > 0)
var nSlide = $(cSlide).prev('img');
else
var nSlide = $('#thumbs img:last');
loadSlide(nSlide);
});
$('#thumbs img').click(function(){
loadSlide(this);
});
$("#panel").click(function(){
$(this).fadeOut("slow");
$("#overlay").fadeOut("slow");
});
$('#close a').click(function(){
$(this).fadeOut('slow');
$('#overlay, #panel, #prev, #next, #largeImage').fadeOut('slow');
$("#thumbs").css('display', 'block');
});
$('#thumbs img').click(function(){
$("#thumbs").css('display', 'none');
});
});
This should suit your needs, just slot it in, or if you need to use the left and right arrow keys elsewhere use $('#gallery') instead of $(document)
$(document).keydown(function (e) {
if (event.keyCode == 37) {
$('#next').click(); //on left arrow, click next (since your next is on the left)
} else if (event.keyCode == 39) {
$('#prev').click(); //on right arrow, click prev
}
});
EDIT: if you need any other keyCodes use this site: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes