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.
Related
So my incremental has come a long way, I got assistance here to make the original popup and it works great, now i really want to make the popup an image?
so far i have:
$("#coffeeButton").click(function(e) {
var obj = $("#clone").clone();
$("body").append(obj);
obj.html("+"+ cookRate);
coffee += cookRate;
totalCoffee += cookRate;
document.getElementById("coffee").innerHTML = prettify(coffee);
document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);
obj.css('position','absolute');
obj.offset({left: e.pageX-10, top: e.pageY-25});
obj.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
});
and it works great and gives me a popup, but how the hell do i make it an image?
I have tried creating a div, putting an image inside that div and instead of calling "clone" calling on the div...
Am i on the right track?
Example of what i want from cookie clicker - http://orteil.dashnet.org/cookieclicker/
my game so far - retiredgamers.net/
jsfiddle - http://jsfiddle.net/edznycyy/6/
There are probably a lot of ways you could do this. To keep things as close to what you have now as possible here's what I would do...essentially just create 2 elements the first being your numbers and the second being the image, make sure the number is above the image using css's z-index, then animate them both in tandem:
Here's a working jsfiddle
HTML changes:
<img title = "" id="myImg" src="http://blog.beautyfix.com/wp-content/uploads/2012/09/Coffee_iStock_000006160362Medium.jpg" style="display:none" width="30" height="30">
Javascript changes:
$("#coffeeButton").click(function(e) {
var obj = $("#clone").clone(); //im guessing you chose to use clone here to make it easier to work with the object, so I did the same for the image
var img = $("#myImg").clone();
$("body").append(obj);
$("body").append(img);
obj.html("+"+ cookRate);
coffee += cookRate;
totalCoffee += cookRate;
document.getElementById("coffee").innerHTML = prettify(coffee);
document.getElementById("totalCoffee").innerHTML = prettify(totalCoffee);
obj.css('position','absolute');
obj.css('z-index', '2');
img.css('position','absolute');
img.show();
obj.offset({left: e.pageX-10, top: e.pageY-25});
img.offset({left: e.pageX-10, top: e.pageY-25});
obj.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
img.animate({"top": "-=80px"}, 1000, "linear", function() {
$(this).remove();
});
});
if you don't want to the trouble of doing it your self, you can use a jquery plugin that does it quite easily. I am sure there is a lot more in the,
Here is what i found!
Here is the demo page for full-screan popup plugin
....
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.fullscreen-popup.js"></script>
....
<a class="open-popup" href="#popup">Open popup</a>
...
<div id="popup" style="display: none; width: 640px">
...
</div>
<script>
$(function() {
$(".open-popup").fullScreenPopup({
// Options
});
});
</script>
Example is from here and you can download the plugin from here and a list that contains many more
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"
});
I'm trying to create a custom slider using jQuery only I'm unsure on the best practice for how ot make this work.
My slider has 3 slides and a controls section each relating to a slide (1, 2, 3).
When a control is clicked I've got my slide fading out only I'm unsure on how to say if X control was clicked, add the active class to the relevant slide?
Ive made a fiddle to explain which i hope helps, what i need however is an explanation of the best practice in doing this?
Sorry if the questions hard to understand!
What I'm using to fade out my current slide, but then once its gone I cant rely on the active class to say add a class to the next element?
$('.ctrl-one').click(function(){
$('.active .slide-img').animate({
'marginRight' : "-=350px"
}, 500, 'easeOutQuint', function(){
$('.active .description').fadeOut().promise().done(function(){
$(this).parent().removeClass('active');
});
});
});
http://jsfiddle.net/Esm97/
I guess this is what you need,try this code , but am sure you can find a lot different methods.
$('.controls a').click(function() {
var current = $(this).attr('class').replace('ctrl-', '');
if (!$('.sector-banner .' + current).hasClass('active')) {
$('.active').animate({
'marginRight': "-=350px"
}, 500, 'linear', function() {
$(this).fadeOut().promise().done(function() {
$(this).css('margin-right',0);
$(this).removeClass('active');
$('.sector-banner .' + current).addClass('active');
$('.sector-banner .' + current).fadeIn();
});
});
}
});
I'm currently utilizing JavaScript to allow users to watch multiple videos on a page. There is one big player at the top of the page, and below it are smaller thumbnails of more videos.
In theory, it works fine. However, there is one major problem: ALL videos load at the same time as the page loads.
See this page for reference. I have assigned JavaScript alerts to each individual videos to exemplify the problem (video1, video2, etc.).
Is there a easy fix, without having to rewrite the entire page, to have the videos load when they are clicked on, not when the page loads? Here's what the code looks like so far:
Javascript that calls the video:
function playVideo(cap, file, streamer, alertmsg) {
var so = new SWFObject('player/player-licensed_5_2.swf', 'ply1', '586', '330', '9');
so.addParam('displaywidth', '586');
so.addParam('displayheight', '330');
so.addParam('allowfullscreen', 'true');
so.addParam('allowscriptaccess', 'always');
so.addVariable('skin', 'player/skins/glow.zip');
so.addVariable('controlbar', 'over');
so.addVariable('plugins', 'captions-1');
so.addVariable('captions.file', cap);
so.addVariable('dock', 'true');
so.addVariable('image', 'landing_img/video.jpg');
so.addVariable('file', file);
so.addVariable('streamer', streamer);
so.addVariable('autostart', 'false');
so.write('player1');
window.alert(alertmsg);
}
The thumbnail for the video:
<div class="mini_player1"> <a href="#" class="vidpic" title="">
<!-- thumbnail-->
<img src="images/1_panda.jpg" alt="Video 1" class="vidpic" />
<span class="play-button"><img src="images/yt.png" alt="Play"></span>
</a>
</div>
<div class="content_mini_player1 cmp">
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
</div>
The script that 'replaces' the content in bigplayer with the new selected video:
jQuery(function ($) {
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20").click(function () {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
});
Any suggestions? Maybe consolidate playVideo and the jQuery function? Any help would be greatly appreciated.
Firstly, in the thumbnail code, there is a random closing </a> tag. Unless there is code you didn't post, I'd suggest removing it.
Secondly, your jQuery can be simplified much further. Currently, you are using the following selector:
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20")
Wow! That is...wow.
Assign the players a single class they can all relate to across the board, select by that class and then run the each() method i.e.:
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
Lastly, when you call a function in a script tag like you are doing:
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
This WILL run the playVideo() function. Consolidating playVideo() and the jQuery code would be your best bet i.e. (using the same construct above):
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
//Add event handler
$(this).on('click',function() {
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
});
});
Your inline JavaScript function playVideo is going to be called when the page loads. You will want to remove it from there and do something like this:
<div onclick="playVideo()" class = "mini_player1">
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>