I am using Nivo Lightbox plugin. I am also using CMS surreal. I want the clients to be able to change the title of the images in the Nivo Lightbox slideshow. The titles to the slideshow are given in the anchor tag that surrounds the image tag, with the title attribute declaring the title displayed on the slideshow:
<img src="images/1.jpg" />
The CMS editor only gives the client the option to edit the alt attribute of the image. Therefore I need to swap the title attribute of the anchor to the alt tag of the image.
Question: How can I make the title of the slideshow link to the alt attribute of the image tag instead of the title attribute of the anchor surrounding it?
I can't find any option in the plugin; without any change to the HTML (or DOM changes) my actual solution (but I think can be improved) is to use the beforeShowLightbox and afterShowLightbox events to get the child img alt attribute and set it in the lightbox title.
Code:
var altText;
$(document).ready(function () {
$('#nivo-lightbox-demo a').nivoLightbox({
effect: 'fade',
beforeShowLightbox: function () {
altText = $($(this)[0].el).find('img').prop('alt');
},
afterShowLightbox: function (light) {
if (altText!=="") $($(light)[0]).find('.nivo-lightbox-title').html(altText);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/MH8mu/
To not change CMS neither Lightbox plugin code, I would use watch plugin to get noticed whenever alt attribute has changed and after that change title attribute.
with jquery:
$('[data-lightbox-gallery] img').attr('alt', $('[data-lightbox-gallery] img').parent().attr('title'));
Later edit: i don't know if i missunderstood you, but seems like you wanted the exactly reverse thing i've wrote:
$('[data-lightbox-gallery]').each(function(){
$(this).attr('title', $(this).children('img').attr('alt'));
}
Related
I want to use my gallery to work in little different way.
Now I have
<a href="/big-image.jpg" data-gallery="lightbox[gallery]">
<img src="/small-image">
</a>
It shows the gallery of different images (small images). If someone click on image, it shows big image in lightbox.
I need to improve it to show the image after hover it not on click. I can add ID or class to elements but I am stuck in how to do it with pure JS (can't use jQuery).
Thank you for show me the way or some tutorial.
i believe u want to use a modal, if so try this
https://www.w3schools.com/howto/howto_css_modals.asp
here instead of onclick event use onhover,
as
$("#id_of_element").hover(function(){
modal.style.display = "block";
};
you can do this with two approaches
1) remove image tag and set CSS property "background-image: url("paper.gif")" on anchor tag and same as change this property on hover
2)
document.getElementByTag("img").hover = function() {
document.getElementByTag("img")[0].src = "any url you want "
}
I use this lightbox-plugin: http://lokeshdhakar.com/projects/lightbox2/ how can I change the image src programmatically so that the plugin calculates the width and hight dynamically? To trigger the click method isn't a solution for me, because I have a swipe-event on the lightbox-image so when I swipe the image gets loaded.
Target your element what you want to manipulate, and after change the src attribute of it:
document.getElementById('imageElementId').src = 'http://example.org/logo.jpg';
Reference from here.
Your image element need an id, wrote that id where I wrote imageElementId and change the URL of the picture to your picures URL.
UPDATE
I've checked the lightbox plugin there is no id for the image. You can use, document.getElementsByClassName('lb-image')[0].src; to target the image.
I want to automatically add Alt Tags for all my product images.
I am using OSCommerce. - I would like to preferably add all product images alt tags to be the same as the product names, or similar - can this be done with a script of some sort?
I would be very grateful for the help
Thanks
Its absolutely possible to add Alt tag dynamically via JQuery to all of your <img> tag present on page.
Assuming that you have <img> tags as follows:
<img class="productimage" title="Some Product Name"
src="http://someserver/somepath/images/product_1983212.jpg">
To Add Alt tag dynamically you can try following approach.
1) Load JQuery into HTML page's <head> tag if its not there.
2) Add jQuery document ready event handler which will add alt tags dynamically as follows:
$(document).ready(function(){
$(".productimage").each(function(){
var currentTitle = $(this).attr("title");
$(this).attr("alt",currentTitle);
});
});
Above code will iterate over all <img> tag having class="productimage" and will read its title and add alt equal to title.
Hope this will help you a bit.
Edit:
By looking at your Product detail page, I came up with following code:
$(document).ready(function(){
$("#product-info-wrapper").each(function(){
var currentProdTitle = $(this).find("#product-header").find("span[itemprop=name]").text();
$(this).find("#product_image_holder > img").each(function(){
$(this).attr("alt",currentProdTitle);
});
});
});
Modified the code to consider situation where you have multiple #product-info-wrapper into single page.
As part of the checkout process of a site im working i can edit the CSS to style the page but there are a few links that are images that i would like to change.
Basicly i need to change every instance of:
<img src="images/button.png">
within the page to
<img src="http://somewhereelse.com/images/newbutton.png">
There is no css ID or class attached to this image and there is no way of adding one.
Can this be done with JS or JQ?
Using jquery:
$('img[src=images/button.png]').attr('src','http://somewhereelse.com/images/newbutton.png');
Good Luck!
$('img').attr('src', 'http://somewhereelse.com/images/newbutton.png');
or
$('img[src=images/button.png]').attr(
'src', 'http://somewhereelse.com/images/newbutton.png'
);
I'm new to the site, and relatively new to ASP.NET (at least commercially).
Bit of a funny problem here. I'm using a few JQuery plug-ins on the same page. What I'm trying to do is to show a thumbnail image preview when hovering over an image, and then switch the image to a different one once clicked, and show this image in a FancyBox - 3 separate images, if you will (let's call them A, B and C). All of this goes inside a slider (yet another JQuery plugin).
I've managed to get the image hover working inside the slider and even the fancy box for the same image; i.e. imgB hovers and imgB is displayed in the fancy box. The problem is that i can't make the switch to imgC when clicking and displaying the FancyBox. The problem is that both the image preview code and the FancyBox require an <'a'> tag, which obviously can't be nested inside each other. My Javascript code is as follows:
<script type="text/javascript">
$(document).ready(function() {
$("a#imgB").fancybox();
});
</script>
My html image code is as follows:
<a href="image/imgB" class="preview" id="imgB">
<img src="image/imgA" alt="Image A">
</a>
The above code displays the 'imgB' image as the hover, and displays the same image in the FancyBox once clicked. What I want to do is keep the hover as is, but switch the FancyBox image for another - imgC - once clicked. According to the FancyBox website, you can force the HREF to change by changing the HREF setting. I have tried a few variations, including this:
$("a#imgB").fancybox({
'href': href.replace('image/imgC.jpg')
});
But unfortunately this doesn't work. I get the feeling it's something really simple that's staring me in the face, but can't figure it out. I'd be grateful for any help.
Thanks!
Fixed it with a simple change to the script:
$("a#imgB").fancybox({
'href': 'image/imgC.jpg'
});
Looks like It ried to overcomplicate it. D'oh! :o)
Can you modify the hover plugin to take a div container instead? I don't think there should be a reason why you can only do a hover on an a link