We Keep Coding

adding sharing buttons (like "addtoany") to a single image in lightbox plugin

I have developed my own theme in wordpress using bootstrap.
I am using lightbox for image gallery and I am both trying to add sharing buttons on a single image opened in pop up,both trying to excercise a bit in using Jquery.
The single image in lightbox of course comes without the option of sharing buttons for social network.
the div that contains the image is an element to consider, and then there is the code of the snippet. i tried to do this...
$sharingButtons = $("</div>");
$sharingButtons.css({top: 100, left: 20, 'absolute'});
$sharingButtons.addClass("");
$sharingButtons.appendTo( '.lb-outerContainer' );
$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id=''> )etc... (here all the snippet code of addtoany)...
</div></div>");
$('img.lb-outerContainer').css("opacity", "0.8");
the element $sharingbuttons is the div that contains the snippet...
it does not work., anyone has better ideas?
I use last version of Jquery.
thanks
Paolo
p.s. do i have to use
"Insert After" to add a div beside the lb-outer container_?
you can view my website here
http://www.paolobergomi.it/new-gallery/indoor-portraits/
if yo uclick on an image, i wish that on the right, in vertical layout..just attached to the image, appear the list of the sharing buttons
i guess insertAfter could be an option? thanks to EO
added:
I would start like this?
$("
and then add the snippet code of addtoany in the new div?
any tips? thanks
paolo

After you append your a2a div code, you need to execute the function a2a.init('page') because the addtoany script need to add your new code. First of all, insert a class a2a_target, an ID for the div and create a javascript code like above:
$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id='myShareLinks'> )etc... (here all the snippet code of addtoany)...
a2a_config.target = '#myShareLinks';
a2a.init('page');
Note: a2a_config and a2a are global variables created by addtoany script.

Auto Swap External CSS Stylesheet with toggle scripting

Hi I am trying to get this script to toggle back to original CSS external stylesheet.
I have the following code that works.
$(document).ready(function() {
$("#css-master2").click(function() {
$("link[title=change]").attr({href : "css/master2.css"});
});
});
Whenever someone clicks on anything with id #css-master2 it changes the external style sheet to master2.css (that part works fine).
What I would like it do is change back to the original master1.css if they click on it again. Something like toggle?
Any help would be greatly appreciated.

Check for the link tag's href, if it equals master2, switch back to master1 like the same way above.
Can't think about why you'd do this, considering the exact thing can be done using css classes instead of two different files.

Trigger multiple jQuery scripts on current active element

I'm a bit new to jQuery and I have difficulties in achieving a function so I really hope somebody could guide me a bit. What I basically want to do is to highlight 2 elements simultaneously (via toggleClass).
Basically I have a repeating div (#post) which contains a title, thumb and description div. What I would like to do is once I hover on the title or the thumb div the elements to get a new additional class (xxxHover). So basically once the user hovers the mouse on the title/thumb div the title/thumb div (both of them) get a new class called (xxxHover where xxx stands for the div name - in this case titleHover/thumbHover).
I might not be the best in explaining so I've prepared a jsFiddle as well:
http://jsfiddle.net/yLqnd/12/
As you can see my problem is to restrict the scripts for the current element only (#post in our case). If it helps or matter I have to say that this will be integrated into a WordPress website (so the HTML structure is basically in the loop.php), that's why I would like to restrict the 2x highlight effect only per item (#post).
Thanks a mill in advance for any idea!

http://jsfiddle.net/oscarj24/yLqnd/13/

Here's an updated jsFiddle:
Instead of being so specific, any div's inside will now toggle the class
jsFiddle Link
Basically I pushed it all together:
$(".post div").mouseover(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
});

I think you can get the effect you're looking for by using .siblings() in jQuery.
$(".title").mouseover(function(){
$(this).toggleClass("titleHover");
$(this).siblings(".thumb").toggleClass("thumbHover");
});
This will limit the toggleClass to only the .thumb that resides in the same .post.
http://api.jquery.com/siblings/

simples, just do it on the parent of both elements:
$(".post").mouseover(function(){
$(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).find('div').toggleClass('thumbHover');
});

How to get the original Height of a HTML element?

I have a div:
<div id="div" style="height:150px; border:solid thin blue;"></div>
is there a way to retrieve the original div height? The div is resizable, so the user may have resized it before my code loads.
Note: my code is a jQuery plugin, so I have no clue about what happened to the element before my plugin is called (so please don't tell me to store height in element data...)
jqFiddle in this demo, I want to get the 150 after resizing the div.
Any help would be greatly appreciated!

No, because resizable() method override inline style height value.
You need to store it somewhere else.
For example before making div resizable:
var originalHeight = $('#div').height();
$('#div').resizable();
$('#cmd').button().click(function(){
alert(originalHeight);
});

I don't know of a way to get old data from the DOM, but could you not insist on the plugin having an init function called and get the values then? You could also advise in your documentation that the elements not be moved until you've completed the init function, although if it's called via .ready() this should occur before the user has a chance to blink anyway.
How is the div resizable, using jquery-ui?
Another option might be to get the page again using ajax and then parse the page, but it would be a lot of effort and very messy.

originalHeight=0;
$(document).ready(function()
{
originalHeight= $("#div").height()
});

need dynamic content on page using javascript

I need this page: http://winteradagency.com/mrw/index.php
so that when you mouseover the different small images (actually a set of them) the text below changes from text into an image (which is a larger image of the smaller one) I used to use Fireworks for that sort of thing but I'm thinking that there must be an easier way using a combination of a div tage and javascript.
Any ideas for something simple?
thanks!

http://fancybox.net/
lightbox, etc...

The jQuery CYCLE plugin might suit your needs. It transforms a list of elements into a scrolling pane. You could simply disable automatic scrolling on initialization, and set the time between slides to 0. Then you can call the "slide number" in the callback for the mouseover event on the smaller thumbnails.
Cycle is here: http://malsup.com/jquery/cycle/
Your application is very similar to this example: link text

This question has a similiar situation (replacing an input with an image) with an answer that might work for you. Note: it uses jQuery.
Edit:
For your situation you could do something like this for each image:
$('img#id').hover(
function() {
('div#id').hide().after('<img src="image.jpg" />');
},
function() {
('div#id').show();
}
);
changing the 'img#id' to the id of the image and 'image.jpg' to the corresponding big image.