Develop Reference

Need JavaScript to reset an images source back to original when a button is clicked, after going through a script which swapped the source

I am currently running JavaScript in my html document successfully which allows me to swap a main-img on hovering over various thumbnails. I have these successfully working in various modal windows with different selections of images within each modal window.
My issue is that after I hover over an image and the 'main-img' changes to the respective thumbnail, When I then then close this window and open a different modal window the 'main-img' has remained that from the previous swap in the previous modal window.
this is the javascript being used for the 'image swap':
$(document).ready(function() {
// Image swap on hover
$("div#gallery li img").hover(function() {
$('img#main-img').attr('src', $(this).attr('src').replace('thumb/', ''));
});
// Image preload
var imgSwap = [];
$("div#gallery li img").each(function() {
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function() {
$('<img/>')[0].src = this;
});
}
I attempted to fix the issue by creating a secondary script which reloads or resets the 'main-img's source back to the original for each modal on a button click which opens the respective modals. However I am only recently self learning jquery and java-script so haven't got to grips with the complexities of the code so there are likely some obvious errors or better ways to approach this.
$(document).ready(function() {
// script reset and reload
$("button.md-trigger").click(
function(){
$('img#main-img').attr('src','2.jpg');
});
});
If you need any more information please let me know.
updated code still not working :
$(document).ready(function() {
var $mainImg = $('img#main-img');
$mainImg.data('originalSrc', $mainImg.attr('src'));
$("div#gallery li img").hover(function(){
$mainImg.attr('src',$(this).attr('src').replace('thumb/', ''));
});
$("button.md-trigger").click(
function(){
$mainImg.attr('src', $mainImg.data('originalSrc'));
});
}

Save it off into a data element.
var $mainImg = $('img#main-img');
$mainImg.data('originalSrc', $mainImg.attr('src'));
$("div#gallery li img").hover(function(){
$mainImg.attr('src',$(this).attr('src').replace('thumb/', ''));
});
Then when you want to change it back, replace the src with the $mainImg.data('originalSrc')

How to automatically click a href link when the page loads?

I'm trying to automatically click a href link when the page loads.
<div class="loadmore" kind="rb">
تحميل المزيد...
</div>
The link is supposed to load more comments when you click it.
I tried this:
window.onload = function() {
autoloadmore()
};
function autoloadmore() {
var loadmoreClass = document.getElementsByClassName("loadmore")[0];
var loadmoreChild = loadmoreClass.getElementsByTagName("a");
if(loadmoreClass){
loadmoreChild[0].click();
}
}
but it doesn't seem to work. The problem seems to be with click(), because when I use other codes such as .style.color, they work.
I'm using Blogger by the way.
This's a sample blog:
http://blog-sample-001.blogspot.com/2018/09/title.html
(go to تحميل المزيد...)
ps: I can't change the div.

Assign some ID to تحميل المزيد... . For example, clickAfterPageLoad or whatever you want, and then try this...
$(document).ready(function() {
$("#clickAfterPageLoad").trigger('click');
});
or if you cant't change div, you can do like this:
$(document).ready(function() {
$(".loadmore a").trigger('click');
});

Insert HTML into DIV with Jquery

This is one of my first jquery scripts. I want to expand a DIV and load some external html into it. This is the code I have so far:
http://jsfiddle.net/spadez/uhEgG/5/
This is the code I have:
$(document).ready(function () {
var loadUrl = http://sheldonbrown.com/web_sample1.html
$("#close").click(function () {
$("#country_slide").hide();
});
$("#country").click(function () {
$("#country_slide").show();
$("#country_slide").html(ajax_load).load(loadUrl);
});
});
The expanding did work but now it doesn't since adding the Ajax code. Can anyone show me hwere I am going wrong, and ideally highlight any thing I am doing wrong. Thank you.

Just replace country click with this
$("#country").click(function () {
$("#country_slide").show();
$("#country_slide").load(loadUrl);
});
and add quotes on url
var loadUrl = "http://sheldonbrown.com/web_sample1.html";

Fixed it for you..
var loadUrl = 'http://sheldonbrown.com/web_sample1.html';
http://jsfiddle.net/APkHN/1/
your URL was not a string, and it was missing an end brace.

put your url inside ''
see it working here --> http://jsfiddle.net/uhEgG/8/
Also, you might need to delegate close like this (As you are replacing html inside #country_slide which contains your #close)
$("#country_slide").on('click','#close',function () {
$("#country_slide").hide();
});

simulating a click on a <a>-element in javascript

for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.
So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:
<script>
$(function() {
$('#tray-button').click();
});
</script>
However, this doesnt seem to work in any browsers i tested.
Any idea?

$('#tray-arrow').click(function() {
// prepare an action here, maybe say goodbye.
//
// if #tray-arrow is button or link <a href=...>
// you can allow or disallow going to the link:
// return true; // accept action
// return false; // disallow
});
$('#tray-arrow').trigger('click'); // this is a simulation of click

Try this
$("#tray-arrow").live("click", function () {
// do something
});

I assume that you want to popup the thumbnail bar #thump-tray on page load.
Here's a way to do it:
locate the file supersized.shutter.js and find this code:
// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
After it, add:
$(vars.tray_button).click();
Dont forget in your page (demo.html in the plugin), to change
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
to
<script type="text/javascript" src="theme/supersized.shutter.js"></script>

instead of using
$(function(){
//jquery magic magic
});
you culd try this witch will work your jquery magic after the full page is loaded (images etc)
$(window).load(function () {
// jquery magic
});
and to simulate a click you culd use // shuld be the same as $('#tray-arrow').click();
$('#tray-arrow').trigger('click',function(){ })
example:
$(window).load(function () {
$('#tray-arrow').trigger('click',function(){
alert('just been clicked!');
})
});

try
<script>
$(function() {
$('#tray-arrow').click();
});
</script>
Make sure that this code is after your carousel is initialized.

This looks like it's a problem of timing the trigger. The plugin also loads on document load, so maybe when you try to bind the event listener the element is not created yet.
Maybe you need to add the listener in something like the theme._init function
http://buildinternet.com/project/supersized/docs.html#theme-init
or somewhere similar.

A problem might be that your plugin detects whether the click has been initiated by a user (real mouse click), or through code (by using $('#id').click() method). If so, it's natural that you can't get any result from clicking the anchor element through code.
Check the source code of your plugin.

Fancybox - Setting the parent window's global variable from within a child fancybox

Here is the issue at hand:
The overall development is being done using Ruby on rails; however, the views consist of mostly html and jQuery. Currently, I have it set up so that when a user types into a text field, they can press a small "suggest" button beneath it which opens up a Fancybox where there is a list of useful Search terms, provided by the Google Suggest API. This is all set up and working. Now I want to take this to the next step, where, from inside of the Fancybox, the users can click on one of the suggestions and it will replace the initially typed in phrase in the parent window. Sadly I am not adept at using AJAX yet so I am trying to do this via javascript. This is what I have thus far:
In the parent window:
<script type="text/javascript">
$(document).ready(function() {
var $_returnvalue = false;
$('.suggest_link').fancybox({
onClosed: function(){
alert($_returnvalue);
if ($_returnvalue != false)
{
// I will be setting the textbox value here.
}
}
});
</script>
In the partial view rendered inside of the fancybox:
<script type="text/javascript">
$(document).ready(function() {
var $_fancyvalue = false;
$(".suggestion").click(function(){
alert(parent.$_returnvalue);
parent.$_returnvalue = $(this).text();
$.fancybox.close();
});
});
</script>
Sorry if there is anything strange with this post. This is my first time asking a question here.

Define var $_returnvalue in the global scope in the parent window. Try this it will work fine.
var $_returnvalue = false;
$(document).ready(function() {
$('.suggest_link').fancybox({
onClosed: function(){
alert($_returnvalue);
if ($_returnvalue != false)
{
// I will be setting the textbox value here.
}
}
});