I have a JSON containing pictures URL, and would like to nest them in <div> that .fadein() only when the contained pictures are completely loaded.
I've been trying this with jQuery, allowing me to wait for an image to completely load before showing its parent.
$(img).load(function () {
$(this).hide();
$("#resultList").append("<li id='li" + $(this).attr("id") + "'>");
$(this).insertAfter("#li" + $(this).attr("id"));
$("</li>").insertAfter(this);
$(this).fadeIn();
}).attr({
src: json.data[i].album.cover + "?size=big",
id: "image" + json.data[i].picture.id,
class: "imageResult"
});
Where this falls short is that I can't seem to insert the picture between the <li>. I've been trying to use a combination of .insert, .insertAfter, but the generated HTML always return something like this:
<ul id="resultList">
<li id="li0001" ></li>
<img src="myPicture.jpg" id="picture0001" class="imageResult">
</ul>
I'm fairly new to jQuery and have been mostly experimenting, this is the only problem I got stuck on for quite a moment. Would you kindly point out my mistakes and tell me how to insert this picture between, and not after, its parents ?
Thanks for your help !
try this:
$(img).load(function () {
$(this).hide();
var $li = $("<li/>").attr("id", "li" + $(this).attr("id"));
$li.append($(this));
$("#resultList").append($li)
$(this).fadeIn();
}).attr({
src: json.data[i].album.cover + "?size=big",
id: "image" + json.data[i].picture.id,
class: "imageResult"
});
Related
This is a little bit of a complicated procedure, but I'll explain it as best I can. I'm creating a portfolio in wordpress and trying to include as much dynamism as I can.
I have a large banner image at the top of the page and individual thumbnails of my work below. What I'm looking to do is be able to hover over the thumbnails and have them fade the header image to larger version of the thumbnail, by using the same image source as the thumbnail.
To make matters more complex, the page thumbnails are generated by cycling through "portfolio" posts with featured images. This means that I don't have a hard copy of each link and need to instead generate it with similar PHP code that I'm using to create the thumbs.
I thought I might be able to do this with CSS only, but my research led me to find that it isn't doable if the elements aren't related to each other, either as parent or sibling.
Is this kind of thing even possible? I assume I'd have to use javascript, but my knowledge of the language is far inferior to my knowledge of CSS/HTML.
The website in question is here.
EDIT:
This is the code I'm using to spawn thumbnails.
<?php
$query = new WP_Query(array('posts_per_page' => 6, 'meta_key' => '_thumbnail_id'));
while($query->have_posts()) :
$query->the_post(); ?>
<div class="portfolioThumbnail"><?php the_post_thumbnail(); ?></div><?php
endwhile;
?>
In a nutshell, the site is comprised like so:
<div id="backgroundThatNeedsToChangeOnHover"></div>
<navigation></nav>
<div id="content">
<div class="portfolioThumbnail">
<img src="spawnedByPHP" />
</div>
<div class="portfolioThumbnail">
<img src="spawnedByPHP" />
</div>
<div class="portfolioThumbnail">
<img src="spawnedByPHP" />
</div>
</div>
Here is a simplified example using jquery: JSfiddle
$(function(){
$('.thumb').click(function(){
$('.header').css("backgroundImage", "url(" + $(this).attr("src") + ")");
});
});
Update with hover and fade in/out: JSfiddle
var url;
$(function(){
$('.header').css("backgroundImage", "url( http://lorempixel.com/100/100/abstract/9 )");
$('.thumb').hover(function(){
url = "url(" + $(this).attr("src") + ")";
$('.header').animate({opacity: 0}, 500, function(){
$(this).css("backgroundImage", url).delay(100).animate({opacity: 1}, 500);
});
});
});
I ran into a small problem with the header being unable to return to the original image (which is the need for this code.) I came up with this. Does this work from an efficient code standpoint? I'd add animation to both events.
$(function(){
var headImg = $('.header').css("backgroundImage");
$('.thumb').mouseover(function(){
$('.header').css("backgroundImage", "url(" + $(this).attr("src") + ")");
});
$('.thumb').mouseleave(function(){
$('.header').css("backgroundImage", headImg);
});
});
JSFiddle
Updated JSFiddle with fade in/out and stop animation JSFiddle
$(function(){
var headImg = $('.header').css("backgroundImage");
var url;
$('.thumb').mouseover(function(){
url = "url(" + $(this).attr("src") + ")";
$('.header').stop().animate({opacity:0}, 250, function(){
$(this).css("backgroundImage", url).animate({opacity: 1}, 250);
});
});
$('.thumb').mouseleave(function(){
$('.header').stop().animate({opacity:0}, 250, function(){
$(this).css("backgroundImage", headImg).animate({opacity: 1}, 250);
});
});
});
UPDATE: Wordpress does not understand delay(). Removed it from the code.
I would like to change the src of an img when the parent of listed children is clicked. I am using some code I have been working with that I found on StackOverflow because I was having problems with slideup and slidedown.
Next to each uppermost item (parent), to the left will be an arrow icon pointing to the right. Upon clicking the icon, this image should change to an arrow pointing down.
I can get the image to change onClick, but unless you click on the image, the image does not change back. Therefore, I believe I need the change to be pegged to the slideup and slide down functions. The image should also change back if you click on the close link or when clicking on a new Parent.
I can live without the 'only one list can be shown at a time' functionality, which would eliminate the need for the image to also change on clicking a new parent.
For this fiddle, I have only applied what I was trying to do to the first parent of the list: http://jsfiddle.net/9aa5n/51/
HTML:
<li><img src="arrowright.png"></li>
<li class="show_hide" id="1C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="2C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="3C">
<p>lkjlkjasdfasdf</p>
Close
</li>
jQuery / Javascript:
$(document).ready(function() {
$('.show_hide').slideUp(0);
$('.edit_this').click(function() {
$('.show_hide').slideUp(300);
var takeID = $(this).attr('id');
$('#' + takeID + 'C').slideDown(300);
});
$('.close').click(function() {
var takeID = $(this).attr('id').replace('Close', '');
$('#' + takeID + 'C').slideUp(300);
});
});
$('#img-tag').on({
'click': function() {
var src = ($(this).attr('src') === 'arrowright.png')
? 'arrowdown.png'
: 'arrowright.png';
$(this).attr('src', src);
}
});
I updated your jsfiddle: http://jsfiddle.net/9aa5n/53/
Since you didn't provide absolute paths to images, I added some from the net.
I removed your click event, and replaced it with this, I believe your issue was how you were referencing the elements in jQuery.
$(".edit_button").click(function() {
var img = $(this).find("img").first();
console.log(img.attr("src"));
if (img.attr("src") === 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png') {
img.attr("src", 'http://png-3.findicons.com/files/icons/2315/default_icon/256/arrow_down.png');
console.log(img.attr("src"));
} else {
img.attr("src", 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png');
console.log(img.attr("src"));
}
});
This should get you started to finish polishing up the UI,
i.e. closing all .edit_button and then open only the $(this).find("img").first() element ...
I'm doing this interface where I have a lot of buttons that are just a li with a background image like this
#menu ul.icons li.nove {
background-image:url(images/edit-menu/icons/undo.png);
background-size:contain;
display:block;
margin-top:29px;
}
<ul class="icons">
<li class="um"></li>
<li class="dois"></li>
<li class="tres"></li>
<li class="quatro"></li>
<li class="cinco"></li>
<li class="seis"></li>
<li class="sete"></li>
<li class="oito"></li>
<li class="nove"></li>
<li class="dez"></li>
</ul>
I need to create a code where I change the background image of the button when the user clicks it, to show that button its activated, I just need to change url(images/edit-menu/icons/ to url(images/edit-menu/select/ and keep the same filename. I need a way to do this dynamically so I won't have to do it for each of the 10 buttons.
Hope I was clear, thanks in advance
I'm not sure what do you mean with the button, but you can try this:
$('.nove').click(function(){
$(this).css('background-image', 'url(images/edit-menu/select/undo.png)');
})
You could just modify css via DOM. Example with jQuery:
$('li.nove').click(function() {
$(this).css('background-image', 'url(images/edit-menu/icons/icon2.png)');
});
I'm assumig you mean each one has a different image so you want to just change the path.
$('.icons').on('click', 'li', function(){
var filename = $(this).css('background-image').split('/');
filename = filename[filename.length - 1];
filename = filename.substr(0, filename.length - 1);
$(this).css('background-image', 'url(images/edit-menu/select/' + filename + ')');
});
This takes the background image and splits it up delimited by '/' then takes the last one of those minus one character which would be the ) and returns that as the filename. Then uses that to change the background image.
Here's a jsfiddle. There's no actual images, but you can view the source in firebug or webkit inspector to see it working.
I think that you can simply do it with something like this (in jQuery, not tested):
$("#menu ul.icons li").click(function(){
$(this).css('background-image', $(this).css('background-image').replace('icons', 'select'));
});
Edit: I just figured out a nicer way if you're using jQuery >= 1.4.
$("#menu ul.icons li").click(function(){
$(this).css('background-image', function(index, oldValue){
return oldValue.replace('icons', 'select');
});
});
You can do like this:
var btn = document.getElementById('buttonID');
btn.onclick = function() {
for (var i = 0, i < document.getElementsByTagName('li').length; i++) {
if (this.className === 'nove') {
document.getElementsByTagName('li')[i].style.background = 'url('+ new path +')';
}
}
};
I'm trying to define a variable on a mouseover event.
The idea is that I can later use that variable to replace the DIV ID's, and "swap-image" pahts to create a generic mouseover script that I can use for a bunch of buttons.
So I don't have to use the same code over and over again and only swich out a few numbers.
Would this work? I tried something like this:
//define variable on mouseover
$("#world_map_8_button").mouseover(function() {
var location = "#world_map_8";
});
//use variable within script
//mouse over/out swap image +
$(location + "_button").hover(function() {
$(location + "_button_jpg").attr("src", "img/buttons/map_buttons/world_map/world_map_8_button_over.jpg");
}, function() {
$(location + "_button_jpg").attr("src", "img/buttons/map_buttons/world_map/world_map_8_button.jpg");
});
});
This is some of the html code to help things clear up, all buttons are named the same way.
<div id="world_map_8_button">
<img id="world_map_8_button_jpg" src="img/buttons/map_buttons/world_map/world_map_8_button.jpg" width="41" height="41" alt="" />
</div>
<div id="world_map_9_button">
<img id="world_map_9_button_jpg" src="img/buttons/map_buttons/world_map/world_map_9_button.jpg" width="41" height="41" alt="" />
</div>
<div id="world_map_10_button">
<img id="world_map_10_button_jpg" src="img/buttons/map_buttons/world_map/world_map_10_button.jpg" width="41" height="41" alt="" />
</div>
if I declare the variable in the HOVER function it works (only for the mouseon though) but that doesn't make any sense and wouldn't be labour saving...
$("#world_map_8_button").hover(function() {
var location = "#world_map_8";
$((location + "_button_jpg")).attr("src", "img/buttons/map_buttons/world_map/world_map_8_button_over.jpg");
},
function() {
$((location + "_button_jpg")).attr("src", "img/buttons/map_buttons/world_map/world_map_8_button.jpg");
});
Looking at your code I think attribute ends with selector $= will help you. You don't have to set any variable to do this, try this
$("[id$=_button]").hover(function() {
$("#" + this.id + "_jpg").attr("src", "img/buttons/map_buttons/world_map/" + this.id + "_button_over.jpg");
}, function() {
$"#" + this.id + "_jpg").attr("src", "img/buttons/map_buttons/world_map/" + this.id + "_button.jpg");
});
});
This is a good candidate for CSS. You could have one image with both the hover and normal images in, and then set the background offset when the mouse hovers. W3Schools explains the technique well
To answer your question directly, however, you could try something like this:
$('[id$=_button]').hover(function() {
$('#'+this.id+'_jpg').attr('src', 'img/buttons/map_buttons/world_map/' + this.id + '_over.jpg');
}, function () {
$('#'+this.id+'_jpg').attr('src', 'img/buttons/map_buttons/world_map/' + this.id + '.jpg');
});
You would only have to put this on your page to take care of it all without having multiple scripts and global variable declarations.
No that won't work. Use jQuery's .data(); method.
I have a fairly simple question (about those damn selectors!) regarding jQuery. I have 2 div's in my body that I had when the site loads. But I want them to show when a certain image is clicked. The problem is that the image is inside a few other elements (div's, ul, li).
I made this simple fiddle to show the div structure http://jsfiddle.net/MspYV/ . So the question is, how do I reach the div's #change_settings_container and .change_settings_translucent from a totally other div/element?
for the div's #change_settings_container it's as simple as $("#change_settings_container")
$("span.change_settings_close_button img").click(function(){
$('div.change_settings_translucent').hide();
});
$("span.toggle").click(function(){
$('div.change_settings_translucent, div#change_settings_container').toggle();
});
See an example here: http://jsfiddle.net/expertCode/K2znp/
<script>
$(document).ready(function () {
$(".small-image img").click(function () {
$(".main-image img").hide();
$(".small-image img").show();
var imgsrc = $(this).attr("src");
$(".main-image").addClass("img");
$(".img").css('background-image', 'url(' + imgsrc + ')');
});
});
</script>