We Keep Coding

Expand current Javascript text box content change

At the moment I have a javascript/jquery snippet that changes text in a text box depending on which icon/image is currently hovered over. It currently uses the ID tag name as the display string. How can I get it to display some other text (based on same image hover) - i.e. instead of using the ID string like "idOne" I can use another string like "This is the text to be displayed" for that particular ID element (.attr('id'))
As you can gather I'm pretty new to this! Will appreciate any guidance.
Thanks
jQuery(document).ready(function($) {
var text=$('#explain-text').text();
$('#idOne,#idTwo,#OidThree,#idFour,#idFive').hover(function() {
$('#explain-text').text($(this).attr('id'));
},function(){
$('#explain-text').text(text);
});
});

You can add other attribute in your img tag like this:
<img id="one" src="images.png" alt="Smiley face" info="This is the text to be displayed" >
And then, in your JS file, get its value as below:
$('#explain-text').val($(this).attr("info"));

Set <img> alt tag with JavaScript

I know how to set an ALT tag on an <img> if I have the class or globally to all the images on the page, however how can I do it to a specific image that doesn't have an id or class? Can I use the parent DIV somehow to reference the image and add an alt tag?
<div id="table_processing">
<img src="processing_report.gif"> Loading Report List...
</div>

I'd recommend using document.querySelector(), which allows you to select the image using CSS (jQuery-like) selectors.
Like this:
var image = document.querySelector("#table_processing img");
and then you can set the alt attribute with:
image.alt = "Our New Alt Text";
or
image.setAttribute("alt", "our New Alt Text");
Here's a demo:
var image = document.querySelector("#table_processing img");
image.alt = "Our New Alt Text";
<div id="table_processing">
<img src="http://via.placeholder.com/350x150"> Loading Report List...
</div>

if you use jQuery, you could use the ID from the parent element like this:
$('#table_processing img').attr('alt', 'your text here');
This "css selector" will get all images inside the div with the id "table_processing" and sets the alt tag.

Pure/True/Real/Faster JavaScript Solution:
function setAlt()
{
var div = document.querySelector("#table-processing");
var image = div.querySelector("img");
image.setAttribute("alt", "something");
}

JQuery allows you to use valid css selector, so you can use this:
$('#table_processing img').attr('alt', <text>);

I hate to keep plugging jQuery, but here is a very good example of automating missing alt tags with generic info, this is something I do to patch for WCAG AA compliance until we can edit all the content.
$("img:not([alt])").attr({ alt: "your alt text", role: "presentation" });
$("iframe:not([title])").attr({ title: "your iframe title" });
This looks for images without alt attributes, adds it and adds the value "your alt text here" along with a role for screen readers, but you can remove that. IO. also do the same for iframes and embeds that may be third parties that are out of compliance.

jquery: an image over an image does not appear on screen after invoke of the toggle method

I have a page where A image is over B image. when page is loaded, I get A image hided using the toggle() method. I'd like to re-show this A image over B image on click of a button. but when the button is clicked, this image not appear over B image. I think A image would be under B image. How Can I show A image?
EDIT : sorry for not providing what I've tried: jsfiddle.net/gtchoi/DTcHh/9364/

From the toggle() that you have just suggested in your question, I'm going to take my best guess and say you're trying to achieve this using jQuery.
We can achieve your result without using the toggle method:
In your HTML you should have something like this:
<img src="imagea.jpg" data-pic-src="imageb.jpg" alt="my picture">
The "data-pic-src" is used for jQuery to understand, however your html doesn't know what this is. It will be used to toggle our image using jQuery.
In your jQuery, you should have something like this:
$(document).ready(function(){
$('img').click(function(){
var temp = $(this).attr('src');
$(this).attr('src', $(this).attr('data-pic-src'));
$(this).attr('data-pic-src', temp);
});
});
Right here in jQuery, we're just swapping the src value each time it is clicked on.

$(document).ready(function(){
// hide A image with css propert 'Display' : 'none'. here
$("#buttonOver").on('click',function(){
// hide B image with css propert 'Display' : 'none'. here and set the ( 'z-index' : 'less' / 'opactity' : '0' ).
// Show A image with css propert 'Display' : 'block'. here (you can make it with 'transition' property as well to show A image ).
});
});
This may help to get what you want.

How do you switch off the Image Count in NyroModal (lightbox) when displaying images

When using NyroModal to display images it automatically shows the image count of how many are in the collection in the H1 tag when the popup occurs i.e. "1/3", "2/3", "3/3"
Does anyone know how to siwtch this off or manipulate the h1 tag?
I'm also interested in NyroModal automatically positioning the h1 tag at the bottom of the image instead of the default (top).
Plugin is located here: http://nyromodal.nyrodev.com/

You should be able to remove the h1 with CSS
h1#nyroModalTitle{display:none}
Looks like there's also a parameter you can pass through: title: null
Alternatively, you should be able to position the h1 tag at teh bottom, but it might involve editing the source javascript.

To remove the 'Page 1 of ...' in NyroModal, use this javascript:
$.nyroModalSettings({ galleryCounts: '' });
To place the nyroModal title/heading below the image then go into the nyromodal javascript code (unpacked) and search for the code below and replace 'modal.contentWrapper.prepend' with 'modal.contentWrapper.append'.
function setTitle() {
var title = $('h1#nyroModalTitle', modal.contentWrapper);
if (title.length)
title.text(currentSettings.title);
else
//modal.contentWrapper.prepend('<h1 id="nyroModalTitle">'+currentSettings.title+'</h1>');
modal.contentWrapper.append('<h1 id="nyroModalTitle">'+currentSettings.title+'</h1>');
}

Hide Image Title in Slimbox

My issue is a lot like this solved thread, except I'm using Slimbox 2:
Hide Image Title Tool Tip Popup on Mouse Rollover or Hover
When you hover over an image, the "Title" attribute pops up. I need HTML in my image title in Slimbox. So, of course, when you're hovering, the "Title" attribute shows all the HTML code. The code works perfectly when you're viewing the image in Slimbox so no problems there. I just need the Title attribute to be hidden/modified not to show this HTML code.
I tried to change Q.title in slimbox.js to something else (like captionname). Then changed the HTML to call for:
<img src="images/team/small.jpg" class ="headline" border="1" hspace="2" />
"Joe Smith" displays as the Title but when you view the image in Slimbox, captionname does not come up at all and neither does the Title. It's just blank where it should be.
What do I need to modify in slimbox2.js to make this work?

you should indeed use the linkMapper option of slimbox (a function that you can pass as an optional parameter) to override the default behaviour of slimbox, which uses the title attribute of your hyperlink for the caption of the box
this way you can use any standard attribute, say 'alt', or even better a custom one like 'slimboxcaption' to make sure no browser will display its content;
to define the matching attribute use the getAttribute of the 'el' node passed to the function
replace the default "jQuery(function($)" call in your slimbox .js file with this
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({ /* Put custom options here */ }, function(el) {
return [el.href, el.getAttribute("slimboxcaption")];
}, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
then you can use this to pass any html content to the box while hiding it for the user hovering over the link
<img src="/myimage_small.jpg"/>

I would leave the title property alone for accessibility purposes, and modify slimbox.js to read the title attribute immediately on page load, store it in a custom property (called "caption" or something), and them programmatically remove the title attribute to prevent the tooltip. Of course this implies that the rest of the code that references the title property needs to be changed to use the custom property.

You can use the linkMapper parameter to customize the caption shown.
If you are using the compressed slimbox2.js you will have the autoload code in there so you can change it to do just what Josh Stodola explained:
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
jQuery(function($) {
$("a[rel^='lightbox']").each(function(){
//Set caption and remove title attributes
this.caption = this.title;
}).slimbox({/* Put custom options here */}, function(el){
//Custom linkMapper to grab the description from the caption attribute
return return [el.href, el.caption];
}), function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});

I changed the Q-function in the minified version of Slimbox2 from this:
function (Q) { return [Q.href, Q.title] };
to this:
function (Q) { return [Q.href, $(Q).attr("data-captionname") || Q.title] };
This way, the normal title in the link element is preseved and in case the is an attribute called "data-captionname" in the link that is being shown in the modal window (or lightbox if you so will).