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>
Related
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'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.
Im stuck with a little problem with fancyBox v2.
I want to launch fancyBox on button click. Once clicked, it will load all the images from the list (from the src attribute of the ).
I have created this jsfiddle to show what I am trying to do: http://jsfiddle.net/fPFZg/
jQuery(document).ready(function($) {
$('button').on('click', function() {
$.fancybox();
});
});
Can anybody see how this would be possible?
I had the same question and found the following to be a simpler method:
HTML
<button class="fancybox" value="Open Fancybox">Open Fancybox</button>
<div class="hidden" id="fancybox-popup-form">
(your Fancybox content goes in here)
</div>
jQuery
$('.fancybox').click(function () {
$.fancybox([
{ href : '#fancybox-popup-form' }
]);
});
CSS
.hidden { display: none; }
Further Reading
Fancybox Docs (click the "API Methods" tab, then read up on the first method, which is called "Open").
you can use it like this:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '1st title'
},
{
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '2nd title'
}
], {
padding : 0
});
Your code doesn't work because this $.fancybox(); doesn't tell fancybox what to open so does nothing.
What I would do, if you don't want to edit every link in your html, is:
1). add an ID to the <ul> tag so we can use that selector like
<ul id="images">
2). bind fancybox to all <a> anchors that are child of your element #images like
var fancyGallery = $("#images").find("a"); // we cache the selector here
fancyGallery.attr("rel","gallery").fancybox({
type: "image"
});
notice that we are adding a rel attribute on the fly to all anchors so they will be part of the same gallery
3). bind a click event to the button (I would recommend you to give it an ID too so it won't mess with other possible buttons in the future) that triggers the existing fancybox script as above, so with this html
<button id="fancyLaunch">Launch Fancybox</button>
use this script
$('#fancyLaunch').on('click', function() {
fancyGallery.eq(0).click(); // triggers a click
});
notice that we used the method .eq() to launch the gallery from the first item (first index in javascript is always 0)
Summarizing, your whole script may look like this :
jQuery(document).ready(function($) {
var fancyGallery = $("#images").find("a");
fancyGallery.attr("rel","gallery").fancybox({
type: "image"
});
$('#fancyLaunch').on('click', function() {
fancyGallery.eq(0).click();
});
});
See JSFIDDLE
Your html:
<ul>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
Your jQuery:
$(document).ready(function() {
$('button').on('click', function() {
$.fancybox($("a.fancybox"));
});});
I have a overlay page where I have one parent div and children div like this
<div id="completeBlock" style="display:block">
<div id="id1" style="display:block">
This is div one
</div>
<div id="id2" style="display:none">
This is div two
</div>
<div id="id3" style="display:none">
This is div three
</div>
</div>
and separate links to show the divs
<a onclick=doChangeDiv(id1)>link one</a>
<a onclick=doChangeDiv(id2)>link two</a>
<a onclick=doChangeDiv(id3)>link three</a>
My aim is to show one div at a time and make others none.It works fine in all browsers but in firefox
it works for the very first time I open the page.If I close the page and open it again,
the hidden divs cannot be made visible and I got an error "TypeError: can't access dead object"
My jquery script is
function doChangeDiv(fromId){
$('#completeBlock').children().each(function() {
if($(this).css('display') != 'none')
{
var hideId = '#'+$(this).attr('id');
$(hideId).hide();
}
});
$(fromId).attr('display','block');
$(fromId).show();
}
Please help me to sort out this problem.
See this : http://jsfiddle.net/uD9mU/1/
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
var fromId = $(this).attr("data");
//alert(fromId);
$('#completeBlock').children().hide().filter('#'+fromId).fadeIn('slow');
});
});
If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?
Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.
Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.
look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});
Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);