I'm pretty new to jQuery and Javascript!
I've made a image gallery where you can click on small thumbnails below and it selects that picture and shows it in a bigger box.
What I want to add is a button on each side of the bigger image which you click on and it changes to the image to the left or right. Problem is, I just can't figure out how :P
(example: https://imagizer.imageshack.us/v2/757x654q90/34/t4y1.png)
So this is the code for the click on image and it changes to the image you clicked on:
<script type="text/javascript">
function changePic(img) {
$("#gallery_img").hide();
$("#gallery_img").attr ("src", img.src);
$("#gallery_img").fadeIn("slow")
}
</script>
And this is the HTML part (only the image buttons):
<div id="gallery_buttons">
<img id="right" src="pics/right.png"></img>
<img id="left" src="pics/left.png"></img>
</div>
Thanks in advance! :)
Dunno if you're still looking for a solution or not but here is an example what you can do.
HTML
<div id="prev">Prev</div>
<div id="next">Next</div>
<ul>
<li class="thumb"><img src="http://i.imgur.com/CdxLTkH.png"/></li>
<li class="thumb"><img src="http://i.imgur.com/N4MgWLu.png"/></li>
<li class="thumb selected"><img src="http://i.imgur.com/KJyey9r.png"/></li>
<li class="thumb"><img src="http://i.imgur.com/8nqKP4I.png"/></li>
<li class="thumb"><img src="http://i.imgur.com/vuvPGHg.png"/></li>
</ul>
<img id="gallery_img" src="#"/>
JQuery
$("li").click(function(){
var img = $(this).find('img').attr('src');
$("ul").children().removeClass('selected');
$(this).addClass('selected');
$("#gallery_img").attr("src", img);
});
$('#prev').click(function(){
var prev = $(".selected").prev();
var img = prev.find('img').attr('src');
$("#gallery_img").attr("src", img);
$("ul").children().removeClass('selected');
prev.addClass('selected');
});
$('#next').click(function(){
var next = $(".selected").next();
var img = next.find('img').attr('src');
$("#gallery_img").attr("src", img);
$("ul").children().removeClass('selected');
next.addClass('selected');
});
Here is the jsfiddle where you can see an example of that code. http://jsfiddle.net/gdSD2/
Obviously it's really rough and can be cleaned up but it works. You also have to remember to account for when the user reaches the end of the list. Add some clause for if there is not next or previous sibling.
Related
I have two div elements that are clickable. When I click one that contains "1" it will give it class="active", when I click one that contains "2" it will give it class="active" and remove class="active" from the 1st one. Basically it is like switch.
<div class="active">1</div>
<div class="">2</div>
then this block:
<div class="carousel-inner">
<div class="carousel-item " data-id="1" data="carousel-item"></div>
<div class="carousel-item " data-id="2" data="carousel-item"></div>
</div>
and after all this code: which is supposed to detach div that don't have data-id of "active" div. When switched, it's supposed to re-attach detached div and detach the second one.
<script>
$(document).ready(function(){
var a = $("div:contains('1')"),
b;
if (a.hasClass('active')){
b = $("[data-id!='1'][data='carousel-item']").detach();
}
else{
$(".carousel-inner").prepend(b);
}
});
</script>
however, it is not working. when I switch (class active moves from one div to another) nothing happens. only first div is detached but on switch it is not reattaching. Any ideas why ? Thanks for any help !
PS: 1. For certain reasons (FU mobirise) I'm not able to manipulate with those two divs with active class(give them onclick() attribute, new class or id and so on).
2. Sorry for my English.
Here is one possible solution. I changed around how you were doing the swap so it isn't doing a detach. But it should give you an idea of how to potentially do it, if you did want to do the detach anyway.
//emulate the external logic that swaps the active class
$(function(){
var $elements = $('.top');
$elements.on('click', function(){
$elements.not(this).removeClass('active');
$(this).addClass('active');
});
});
$(function(){
var $top = $('.top');
var $carousel = $('.carousel-inner');
var $carouselItems = $carousel.find('.carousel-item');
$top.on('click', function(){
var $this = $(this);
$carousel.prepend($carouselItems.filter(function(){
return $this.data('id') === $(this).data('id');
}));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top active" data-id="1">1</div>
<div class="top" data-id="2">2</div>
<div class="carousel-inner">
<div class="carousel-item " data-id="1" data="carousel-item">Number 1</div>
<div class="carousel-item " data-id="2" data="carousel-item">Number 2</div>
</div>
I have a hidden div with the details of a thumbnail that is visible on the page. When you click on the thumbnail, it should fadein or slideup the div with details.
I have set with jquery incremented ID's to each ".portfolio-item-details" to identify each one and then have set with jquery the same ID's to the href of the thumbnail.
<section id="portfolio1" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio1" title="">
<img src="thumbnail.jpg">
</a>
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
Since this is done dynamically, how can I with jquery fadeIn or slideUp the ".portfolio-item-details" if the href is equal to the ID. Basically thumbnail with "#portfolio1" should slide up the div with "#portfolio1" on click.
This is my jquery code which to add the IDs and HREF is working perfectly but not working to slideUp or fadeIn the div with the same ID.
$(document).ready(function () {
var i=0;
$(".portfolio-item-details").each(function(){
i++;
var newID="portfolio"+i;
$(this).attr("id",newID);
$(this).val(i);
});
var i=0;
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="#portfolio"+i;
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
});
});
SOLUTION
Thanks to Austin's code, I was able to modify it to work with mine.
Check here: http://jsfiddle.net/jdoimeadios23/xpsrLyLz/
You want something like this?
HTML
<div class="image" value="1">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio1" class="details">details</div>
<div class="image" value="2">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio2" class="details">more details</div>
JS
$(document).ready(function () {
$('.details').fadeOut(1);
$(".image").click(function () {
var num = $(this).attr("value");
$("#portfolio"+num).fadeIn(1000);
});
});
JSFiddle Demo
You don't even need to bother with ID's so long as the next div below each image is it's details.
The problem is in this block
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
Because you're having two errors, the first one is that newReadMoreHREF is a variable, not a string in your HTML or a value to any variable and so on.
Second thing is, that in the variable declaration you're using "#portfolio"+i;, which would be good if you were about to select an element. But using it in the jQuery iif statement with .attr('id') will again cause a havoc.
The thing that you need is something like this
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="portfolio"+i; // removed #
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details a").attr("id") == newReadMoreHREF) {
// you need to access the hyperlink in the element, not
// the element itself. this portfolio1 ID is of a hyperlink
// again here, this is referencing the main iterator.
$(this).fadeIn();
// are you sure you want to fade the .open-portfolio-item-details?
}
});
Removed the hash sign and then called the variable value to check against. It would execute to be true if the condition is true.
Try this:
HTML:
content
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>
Jquery:
$('a.open-portfolio-item-details').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$('.portfolio').hide();
$('.portfolio' + id).fadeIn();
});
Couldn't get the fiddle link for some reason.
Edit:
I don't know the name of the class that shows the content you want displayed, so as an example I'm using portfolio. Try putting this code into a fiddle
I have an images slideshow which each images can bee zoomed in the slideshow. And all the codes I used was working fine before I added some change there.
Here is the working code:
<div id="leftBigWraper"><!-- Example -->
<div id="bigPicture">
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg" alt="" width="100%"/></div>
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg" alt="" width="100%"/></div>
</div>
<div id="smallPicture">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg" width="100%">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg" width="100%">
</div>
</div><!-- End of Example -->
<!--End of Wraper in the Left Side (Product Images)-->
In the working code, all the content in the #bigPicture div is set maually, and the slideshow is run by this script:
var $el = $('#leftBigWraper'),
// SETUP ////////
F = 600 , // Fade Time
P = 5000 , // Pause Time
C = 0 , // Counter / Start Slide# (0 based)
///////////////////
$sl = $('#bigPicture > div'),
$th = $('#smallPicture > img'),
N = $sl.length,
T = 10000;
$sl.hide().eq(C).show();
$th.eq(C).addClass('on');
// ANIMATION
function anim() {
$sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0);
$th.removeClass('on').eq(C%N).addClass('on');
}
// AUTO ANIMATE
function autoAnim() {
T = setTimeout(function() {
C++;
anim(); // Animate
autoAnim(); // Prepare another iteration
}, P+F);
}
autoAnim(); // Start loop
// HOVER PAUSE
$el.hover(function(e) {
return e.type==='mouseenter'? clearTimeout( T ) : autoAnim();
});
// HOVER THUMBNAILS
$th.on('mouseenter', function() {
C = $th.index( this );
anim();
});
THE WORKING FIDDLE
However, when all the contents in the #bigPicture div are set by calling it from hidden div and with Jquery, the slideshow and the zooming function is not working anymore.
The Jquery that I used to fill the blank div from the hidden div is here:
$(document).ready(function(){
$('#bigPicture').html($('#pilihWarna li #bigHidden:first').html());
$('#smallPicture').html($('#pilihWarna li #smallHidden:first').html());
$('#pilihWarna li').click(function(event) {
$('#bigPicture').html($(this).find('#bigHidden').html());
$('#smallPicture').html($(this).find('#smallHidden').html());
});
});
As follows:
First, I left the div of #bigPicture to be blank or without any content in there.
<!--Wraper in the Left Side (Product Images)-->
<div id="leftBigWraper"><!-- Example -->
<div id="bigPicture"></div>
<div id="smallPicture"></div>
</div><!-- End of Example -->
<!--End of Wraper in the Left Side (Product Images)-->
Then, I create some hidden div that will transfer all the contents insede the div to the #bigPicture div.
<ul id="pilihWarna" style="">
<li><img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1_7.jpg" width="10%">
<div id="bigHidden">
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg"></div>
<div class="easyzoom easyzoom--overlay">
<p></p>
<img src="colour/big/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg"></div>
</div>
<div id="smallHidden">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_1.jpg">
<img src="colour/thumnail/Evan-Picone-Turtleneck-Sweater-Dress__01688224_balired_2.jpg">
</div>
</li>
The ul which its id is #pilihanWarna has at least 5 li, which I used as clickable menus that I have been discussing here
That's when the slidshow and the zooming images functions are not working anymore.
You're using the same IDs multiple times, IDs should be unique. Given multiple elements with the same ID:
<div id="foo">One</div>
<div id="foo">Two</div>
<div id="foo">Three</div>
Searching the DOM for the elements will only ever return the first instance:
document.getElementById('foo'); // returns <div id="foo">One</div>
Start by removing the duplicated IDs and using a different selector (a class probably, but you could just use an element selector too) and then you might be getting somewhere.
I'm a little new to javascript/jquery. I'm trying to make a function that will switch from a 200x200 image to a 400x400 image on hover. Luckily, all the 200x200 images end in .200.200.jpg and all the 400x400 .400.400.jpg and are otherwise the same file path.
Here's my javascript (I switched hover to trigger for testing)
$('.Content .ProductList li').trigger(function(){
var ImageSRC = this.find(".productimage a img").attr('src');
NewImageSRC = ImageSRC.replace('.200.200.jpg','.400.400.jpg');
this.find(".productimage a img").attr('src', NewImageSRC)
});
This is the error I'm getting on console:
TypeError: Object function (){ var ImageSRC = this.find(".productimage a img").attr('src'); NewImageSRC = ImageSRC.replace('.200.200.jpg','.400.400.jpg'); this.find(".productimage a img").attr('src', NewImageSRC) } has no method 'indexOf'
And here for reference is an abbrebiated version of the HTML I'm trying to get at:
<div class="content">
<ul class="ProductList =">
<li>
<div class="ProductImage">
<a href="#">
<img src="../../...200.200.jpg" />
</a>
</div>
</li>
...
</ul>
</div>
keep hover, and use
$(this).find
instead of
this.find
Can you do an on hover event, and adjust CSS via ID?
$( ".img200pxclass" ).hover(function() {
$(this).attr('src','400px.png');
$(this).switchClass( "img200px", "img400px");
$(this).css("height", "400px"); //same for width ; except, updating class might do this for you if you want
});
I think something like this could work, if you can mess with class attributes
I'm using this javascript to open a div containing an image when clicking on a text
http://jsfiddle.net/BfMDL/1/
my script :
$(document).ready(function() {
$('.image_trombi').hide();
$('.titre').click(function() {
$('.image_trombi').slideUp();
$(this).next().slideToggle();
return false;
});
});
my html
<div>image 1<div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-9.jpg" class="trombi_anim"/></div>
<div>image 2<div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-5.jpg" class="trombi_anim"/></div>
<div>iamge 3<div class="image_trombi"><img src="http://lorempixel.com/output/sports-q-c-200-200-5.jpg" class="trombi_anim"/></div>
It works perfectly, but I would like the div to close after clicking again on the link.
So, click on "image1", open image 1, and click again on "image1" close image 1...
and so on...
use only slideToggle() as you are doing slideToggle() you don't need to slideUp() that image container.
$('.titre').click(function() {
$(this).next().slideToggle();
return false;
});
Fiddle Demo
Here is a simple demo of an accordion effect that i made a year ago.
JS
(function() {
var menu = $('#acordion'),
contents = menu.find('.acordion-content').hide();
menu.children('li').click( function() {
contents.slideUp(200);
$(this).children('.acordion-content:hidden').slideDown(200);
});
})();
HTML
<ul id="acordion">
<li>
<div class="acordion-title">Cosa1</div>
<img class="acordion-content" src="" />
</li>
<li>
<div class="acordion-title">Cosa2</div>
<img class="acordion-content" src="" />
</li>
<li>
<div class="acordion-title">Cosa3</div>
<img class="acordion-content" src="" />
</li>