I am using the jQuery gridrotator effect for my photo gallery. This plugin creates a grid of images inside a number of columns and rows which will arrange the images into the grid and the remaining images will appear with different animations and delays. But to do this the tag <img> is removed and is replaced by anchor <a> with src into the style.
from this:
<img src="thumbnail/23.jpg"/>
to this:
<a href="#" style="background-image: url(thumbnail/23.jpg);">
I want to disable that rotator effect and keep static images by clicking on a button. So I tried to add the <img> tag and remove anchor tag:
$("#destroy").click(function(){
$("#ri-grid").attr('id','ri-order');
var anchor = $("#ri-order").children('ul').find('a');
anchor.each( function() {
var bg = $(this).css('background-image');
bg = bg.replace('url(','').replace(')','');
$(this).parent().append('<img />');
$(this).parent().find('img').attr( 'src' , bg );
$(this).remove();
});
});
Here is the example. If you click on "Disable Effect" button you can see that my code works fine but after a few seconds the tag anchor and the animation returns in the DOM.
Why? Is there a way to disable that effect? or how can I disable or destroy the gridrotator() function?
Thank you so much for any help!
var Grid = $("#ri-grid").clone();
$("#ri-grid").html("").replaceWith(Grid);
$(".ri-grid").attr("id", "ri-grid-new");
Add this to the beginning of your $("#destroy").click function and that should do the trick.
Related
I have 12 buttons each with an ID, i'm using this script for the action.
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
});
});
WEyear18000, is the id of button, WEtextarea, is the id of the div where txt is displayed on button click, WEimage_view, is the id of the div where new image displayed on same button click, WEee24f5837, is the id to close a collapsible panel where buttons are located.
There are 12 of these script statements in a .js file.
It all works but it causes some strange effects after the 2nd or another button is clicked, all the images on the page disappear but the one on the button click. Page is here, page with issue
Any suggestion on how to stream line script wanted. I a newbe to scripting but managed to hodgepodge this to work but has and adverse affect on the rest of the pages images. Suggestion and samples to jsfiddle. Thanks in advance.
<div id="wrapper">
<div id="WEtextarea"> </div>
<div id="WEimage_view"></div>
</div>
CSS controls size and all aspects of div.
I tried all your menu items... And did not notice such a bug.
So, while your're here... I have a suggestion to reduce your long script made of a small chunk repeated 12 times.
I would define the maps as objects, like this:
var maps = [
{
buttonId: "WEyear18000",
text: "Files/Docs/y18000.txt",
image: "Files/Image/treesimages/PalaeoGlaciolMaps.jpg"
},
{
// other 11 objects using the same structure...
}
];
And I would just add a class to each items, in the HTML, like this:
<div id="WEyear18000" class="BaseDiv RBoth OEWELinkButton OESK_WELinkButton_Default OECenterAH clickHandlerClass" style="z-index:1">
Then, I would use a shorter function like this one:
$(document).ready(function() {
$(".clickHandlerClass").click(function(){
// Get the id of the clicked menu item
var thisId = $(this).attr("id");
// Find its related object
var mapIndex = -1;
for(i=0;i<maps.length;i++){
if( maps[i].buttonId == thisId ){
mapIndex = i;
}
}
if(mapIndex != -1){
// Use the object infos in the page elements.
$("#WEtextarea").load(maps[mapIndex].text);
$('#WEimage_view').html('<img src="'+maps[mapIndex].image+'" >');
$('#WEee244f5837 .PullZone').click();
wheelzoom(document.querySelectorAll('img'));
}else{
console.log("Undefined map or id error...");
}
});
});
The array of objects is way easier to maintain... And an additional button easier to add.
You can use another class name than "clickHandlerClass".
;)
The wheelzoom looked like the only possible source of error to me. So I looked for its source, and found:
Wheelzoom replaces an img's background-image with its src. Then the src is set to a transparent image.
So, on the first wheelzoom, you get src transeparent, and on the second, you get a transparent background-image as well.
You can fix this by calling wheelzoom only on your new image:
$(document).ready(function() {
$("#WEyear18000").click(function() {
$("#WEtextarea").load("Files/Docs/y18000.txt");
$('#WEimage_view').html('<img src="Files/Image/treesimages/PalaeoGlaciolMaps.jpg" >');
$('#WEee244f5837 .PullZone').click();
//wheelzoom(document.querySelectorAll('img'));
wheelzoom(document.querySelectorAll('#WEimage_view img'));
});
to fix your bug you need to replace:
wheelzoom(document.querySelectorAll('img'));
with:
wheelzoom(document.querySelectorAll('#WEimage_view img'))
So only the images in the #WEimage_view will be affected by wheelzoom
i have a script, after finishing something, a button with an link will appear, before the button is not clickable. but i have a problem.
this is the code:
FB.ui(e, function(t) {
if (t["post_id"]) {
//your download content goes here
// Do something there
var secret_data = "<a href=\"http://TEST.com\">";
jQuery("#results").html(secret_data);
}
})
<div id="results"><img src="img/button.png"></a>
I thought that after finishing this action that the code would look like this:
<img src="img/button.png">
But it isn't..
So does someone have the answer ?
If you are trying to wrap an <a> around an existing image use wrap()
$('#results img').wrap('');
Using html() replaces everything in the target element with the new content
Your html for button should be a div with button image(not clickable) like
<div id="results"><img src="img/button.png"></a>
And Javascript code to add the active button should be like
var secret_data = '<img src="img/button.png">';
jQuery("#results").html(secret_data);
This should do the trick.
I'm looking to change the color of the button or in this case the image of the button each time the button is selected on the toggle of the jQuery. Here's what I have so far for jQuery.
jQuery(document).ready(function () {
jQuery('#occupation').hide();
jQuery('#occupationshow').on('click', function (event) {
jQuery('#occupation').toggle();
});
});
And here's what I have for the button:
<button id="occupationshow">
<img src="../SiteAssets/images/RAC/askcut/Occupation.jpg">
</button>
How can I get it so another image is displayed on the button when the button has been clicked?
The best way to do this is I think the following:
Create a sprite image of the two backgrounds for this button - so, one image file, with the two images side by side.
Set this image as the background-image of the element using CSS
Giving your button#occupationshow a fixed width/height, have the jquery modify the background-position of the image depending on the state of the button - simply put, depending on the current state of the button, the image will move left/right within button#occupationshow and you will only be able to see the relevant part at any one time.
You can as suggested modify the src attribute dynamically, but do bear in mind that with this approach the new image might take a moment to load once the button is clicked; with my approach both images are preloaded (as they are one image) and it's simply moving around, and so is instant.
Sprites are a great way of working, I'd recommend looking into them :-)
You can use the css function of jquery to change the background image of a button on every click.
toggle() by default is for showing/hiding. Use attr() with a callback function
jQuery('#occupationshow').on('click', function (event) {
jQuery(this).find('img').attr('src', function(){
var src = $(this).attr('src') == 'img1' ? 'img2' : 'img1';
return src;
});
});
I guess you only have two images, right?
So what you can do is put two tags, corresponding to both of your images, ont being set as "display: none".
<button id="occupationshow">
<img src="../img1.jpg">
<img src="../img2.jpg" style="display: none;">
</button>
And in jQuery your code will be :
jQuery('#occupationshow').on('click', function (e) {
jQuery('#occupationshow img').toggle();
});
Edit: I re-read the first post again and don't know what made me guess OP only had two images... (the fact he wants to use "toggle", I guess)
I am currently displaying pictures when an tag is hover over. I have been able to workout the main problem of displaying the picture. The problem is that it has a glitch when hovering occurs quickly. Is there away to avoid that? Also how can i set a default image to display when page is loaded? JSFIDDLE
HTML
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
Jquery
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
var ID = $(this).data("content");
$("div#images").children("img#" + ID).hide();
}
);
Glitch
The problem is that it has a glitch when hovering occurs quickly. Is
there away to avoid that?
This is not a glitch. fadeIn is using animation. As you are hovering over the links faster than the animations complete your experiencing that "glitch".
To ensure you are not clashing with the previous running animation you have to stop any current and any queued animation.
Replace
$("div#images").children("img#" + ID).fadeIn("slow");
with
$("div#images").children("img#" + ID).stop(true, true).fadeIn("slow");
DEMO - Clearing the animation queue before starting the next one
how can i set a default image to display when page is loaded?
I added the code to show a default image as well. To prevent any odd visuals when hovering over a menu item the first time when using a default image. The code checks if we are showing a default image and if we are it will further check if the image for the current menu is the default image.
If it is, it won't hide it as it is showing it anyway but if it is not, it will ide the default image before fading in the new one.
Hope this makes sense, see the full code and DEMO below.
// Indicates if default image is shown
var showingDefaultImage = true;
var $images = $("div#images");
var $defaultImage = $images.children("img#tacos");
// Display a default image
$defaultImage.show();
$("div#links > a").hover(
function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (showingDefaultImage) {
showingDefaultImage = false;
if (!$image.is($defaultImage)) {
$defaultImage.hide();
}
}
$image.stop(true, true).fadeIn("slow");
}, function() {
$images.children().hide();
});
DEMO - Showing a default image
The code in the above DEMO is also a little more optimized by caching the selectors.
would it be possible to leave up the most recent image from the last
hovered tag ?(instead of hiding the image and leaving a blank)
If I understood you correctly you don't want to hide the image when you leave menu with your mouse but instead want to leave the image of the menu you last hovered over visible.
To do that you remove the second function of the hover and as it is no longer needed you can now attach the mouseenter event instead.
var $images = $("div#images");
var $currentImage = $images.children("img#tacos");
$currentImage .show();
$("div#links > a").mouseenter(function() {
var ID = $(this).data("content");
var $image = $images.children("img#" + ID);
if (!$image.is($currentImage)) {
$currentImage.hide();
}
$currentImage = $image;
$image.stop(true, true).fadeIn("slow");
});
DEMO - Fading in images on mouseenter and leaving last image visible
The above code includes caching of selectors for optimisation and the logic to ensure no "flickering" occurs when the new hovered menu item is the same as the last one which was hovered.
See http://jsfiddle.net/7Wp9z/7/
As François Wahl said, use stop to stop the animations. But instead of using data-content and IDs, I think that you could use index:
HTML:
<div id="links">
Cheeseburger »
Tacos »
Salads »
Bread Sticks »
Dessert »
</div>
<div id="images">
<img src="http://media.smashingmagazine.com/wp-content/uploads/images/brand-ux/cb.jpg">
<img src="http://adventuresoflittlemiss.files.wordpress.com/2012/07/tacos.jpg">
<img src="http://www.growingappetite.com/wp-content/uploads/2011/05/chicken-salad1.jpg">
<img src="http://afflictor.com/wp-content/uploads/2010/10/breadsticks1.jpg">
<img src="http://1.bp.blogspot.com/-IaURSrV70LI/T4YzPubl9EI/AAAAAAAAGSg/AEdd-eLuJUk/s1600/Cooking+Weekly.jpg">
</div>
JavaScript:
$("div#links > a").hover(
function(){
$("#images>img")
.hide()
.stop(true,true)
.eq($(this).index()).fadeIn("slow");
},
function() {
$("#images>img").hide();
}
);
Have you tried not specifying which children should hide on the mouse-out portion?
$("div#links > a").hover(
function(){
var ID = $(this).data("content");
$("div#images").children("img#" + ID).fadeIn("slow");
},
function() {
$("div#images").children().hide();
}
);
The glitch probably occurs because the image isn't loaded yet, you should look up some preloading technique. You will always have to wait for the relevant images to be loaded though before you can show them.
But you could enhance the user experience by either indicating that the images are getting loaded or by simply not activating the hovering effect until the images are loaded.
I'd probably go with the last case since I'm lazy but thats just me.
A simple preloading technique is to declare several id's with different background images and then changing the id dynamically using javascript and thus showing the image.
$("#id-of-element").attr('id','preloaded-bg-div');
I have some image and I want colorbox to start its gallery directly from mouse click on img tag, not on a hyperlink tag as the rules are. Is there any way to do that?
$('img').click(function() {
$(this).colorbox({href: $(this).attr('src')});
});
Also see my jsfiddle: http://jsfiddle.net/5HdQB/
first add a class to your imgs
<img src="..." class="myImg"/>
$('.myImg').click(function() {
$(this).colorbox();
});