I want to set attribute of every a tag as img tag's src.
Here is what I did.
$(document).ready(function() {
var href=$('.single img').attr('src');
$('.single').attr('href',href);
$(".single").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single" >
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single" >
<img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>
But every a tag has same href.
How can I fix this
You can use attr() with callback, which iterate over the elements and update the attribute by getting children img attribute value
$(document).ready(function() {
$('.single').attr('href', function() { // iterate over a tag
return $(this)
.find('img') // get children img
.attr('src') // get arc attribute
});
$(".single").fancybox({
helpers: {
title: {
type: 'float'
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<a class="single">
<img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1514/23919332220_60b7867d60_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1669/23976340262_a5ca3859f6_m.jpg" alt="" />
</a>
<a class="single">
<img src="http://farm2.staticflickr.com/1459/23610702803_83655c7c56_m.jpg" alt="" />
</a>
You should go through all of the images and assign it one by one (That's using your own code).
You can do something like:
$(document).ready(function() {
$(".single img").each(function() {
var href=$(this).attr('src');
$(this).parent().attr('href',href);
})
$(".single").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
})
Related
Is this code still working? I tried it but unfortunately, it didn't work...
I'm using OwlCarousel2-2.3.4 version. When I load the .JS code, and put the id #figcaption the figure didn't appear. I do not know why it isn't workin'...
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<figure id="currentImageWithCaption">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="200" height="150">
<figcaption id="figcaption">Title 1</figcaption>
</figure>
<div class="owl-carousel">
<div class="item">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<style>
figure img {
display: block;
width:100%;
height: auto;
}
.owl-wrapper-outer{
display : none;
}
</style>
<script>
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
navigation: true,
pagination: true,
lazyLoad: true,
afterMove: function(elem) {
var current = this.currentItem;
var currentImg = elem.find('.owl-item').eq(current).find('img');
$('figure')
.find('img')
.attr('src', currentImg.attr('src'))
.attr('alt', currentImg.attr('alt'))
.attr('title', currentImg.attr('title'));
$('#figcaption').text(currentImg.attr('title'));
}
});
</script>
Thanks for your help !
You can use translated.owl.carousel event for that
Here is a working Fiddle
owl.on('translated.owl.carousel', function(event) {
var comment = $(this).find('.active').find('img').attr('alt');
var title = $(this).find('.active').find('img').attr('title');
if(comment) $('.image-caption').html('<h4>'+title+'</h4><p>'+comment+'</p>');
});
UPDATE:
Slightly improved code and added functionality to update image caption
on carousel load.
FIDDLE
I want to make evaluation page that allow student to evaluate course:
Here jquery code that are used to change the color of the white images to yellow ones
<script type="text/javascript">
var clickedFlag = false;
$(".ratingStar").click(function () {
$(this).attr("src", "/Content/images/yellowstar.gif").prevAll("img.ratingStar").attr("src", "/Content/images/yellowstar.gif").attr("value",1);
});
$(".ratingStar, #radingDiv").mouseout(function () {
$(this).attr("src", "/Content/images/whitestar.gif");
});
$("#ratingDiv").mouseout(function () {
if (!clickedFlag) {
$(".ratingStar").attr("src", "/Content/images/whitestar.gif");
}
});
$(".ratingStar").click(function () {
clickedFlag = true;
$(".ratingStar").unbind("mouseout mouseover").css("cursor", "default");
var url = "/EvaluationQuestion/SendRating?r=" + $(this).attr("data-value") + "&s=5&id=#Model&url=#Url";
});
this is html code the display the images of stars
<div id="ratingDiv" class="smallText">
Poor
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="1" />
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="2" />
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="3" />
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="4" />
<img src="~/Content/images/whitestar.gif" alt="" class="ratingStar" data-value="5" />
Excellent
</div>
I want to receive the data value of these images in the action of this view
I'm using own carousel, so to add caption I followed this question on stack overflow but it didn't work for me. Then I checked using inspect element and found that their is no 'active' class on my carousel current image. So I added script to do so. In the end my script look like this
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
afterAction: function(el) {
//remove class active
this
.$owlItems
.removeClass('active')
//add class active
this
.$owlItems
.eq(this.currentItem)
.addClass('active')
},
onInitialized: function() {
var activeImg = $('.owl-carousel').find('.active').find('img');
var comment = activeImg.attr('alt');
var title = activeImg.attr('title');
if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>');
}
});
owl = $('.owl-carousel').owlCarousel();
$('.prev').click(function() {
owl.trigger('prev.owl.carousel');
});
$('.next').click(function() {
owl.trigger('next.owl.carousel');
});
owl.on('translated.owl.carousel', function(event) {
var activeImg = $(this).find('.active').find('img');
var comment = activeImg.attr('alt');
var title = activeImg.attr('title');
if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>');
});
});
The script is not working properly.
In this solution i am using HTML figcaption element that represents a caption or a legend associated with a HTML figure.
Also i have added all the needed logic at OWL Carousel afterMove after move callback:
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
navigation: true,
pagination: true,
lazyLoad: true,
singleItem: true,
afterMove: function(elem) {
var current = this.currentItem;
var currentImg = elem.find('.owl-item').eq(current).find('img');
$('figure')
.find('img')
.attr({
'src': currentImg.attr('src'),
'alt': currentImg.attr('alt'),
'title': currentImg.attr('title')
});
$('#figcaption').text(currentImg.attr('title'));
}
});
.owl-carousel .owl-item img {
display: block;
width:80%;
height:100px;
}
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<figure id="currentImageWithCaption">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="50" height="30">
<figcaption id="figcaption">Title 1</figcaption>
</figure>
<div class="owl-carousel">
<div class="item">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
</div>
</div>
#YosvelQuintero posted the script but don't know why he deleted it. So I am posting it again in case if anybody need it.
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<figure id="currentImageWithCaption">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="200" height="150">
<figcaption id="figcaption">Title 1</figcaption>
</figure>
<div class="owl-carousel">
<div class="item">
<img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
</div>
<div class="item">
<img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<style>
figure img {
display: block;
width:100%;
height: auto;
}
.owl-wrapper-outer{
display : none;
}
</style>
<script>
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
navigation: true,
pagination: true,
lazyLoad: true,
afterMove: function(elem) {
var current = this.currentItem;
var currentImg = elem.find('.owl-item').eq(current).find('img');
$('figure')
.find('img')
.attr('src', currentImg.attr('src'))
.attr('alt', currentImg.attr('alt'))
.attr('title', currentImg.attr('title'));
$('#figcaption').text(currentImg.attr('title'));
}
});
</script>
I got a Thumbnail slider but that does not work right, When i click a particular thumb image, the main images is repeated is the same image appears.
Anyone can help me to solve this
Relevant URL: http://jsfiddle.net/danoftheman/C3Sr3/1/
$(document).ready(function() {
$(function() {
// If there are gallery thumbs on the page
if ($('#gallery-thumbs').length > 0) {
// Cache the thumb selector for speed
var thumb = $('#gallery-thumbs').find('.thumb');
// How many thumbs do you want to show & scroll by
var visibleThumbs = 4;
// Put slider into variable to use public functions
var gallerySlider = $('#gallery').bxSlider({
controls: false,
pager: false,
easing: 'easeInOutQuint',
infiniteLoop: true,
speed: 500,
onAfterSlide: function(currentSlideNumber) {
thumb.removeClass('pager-active');
thumb.eq(currentSlideNumber).addClass('pager-active');
},
onNextSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
},
onPrevSlide: function(currentSlideNumber) {
slideThumbs(currentSlideNumber, visibleThumbs);
}
});
// When clicking a thumb
thumb.click(function(e) {
// -6 as BX slider clones a bunch of elements
gallerySlider.goToSlide($(this).closest('.thumb-item').index() - 6);
// Prevent default click behaviour
e.preventDefault();
});
// Function to calculate which slide to move the thumbs to
function slideThumbs(currentSlideNumber, visibleThumbs) {
// Calculate the first number and ignore the remainder
var m = Math.floor(currentSlideNumber / visibleThumbs);
// Multiply by the number of visible slides to calculate the exact slide we need to move to
var slideTo = m * visibleThumbs;
// Tell the slider to move
thumbsSlider.goToSlide(slideTo);
}
// When you click on a thumb
$('#gallery-thumbs').find('.thumb').click(function() {
// Remove the active class from all thumbs
$('#gallery-thumbs').find('.thumb').removeClass('pager-active');
// Add the active class to the clicked thumb
$(this).addClass('pager-active');
});
// Thumbnail slider
var thumbsSlider = $('#gallery-thumbs').gbxSlider({
controls: true,
pager: false,
easing: 'easeInOutQuint',
displaySlideQty: visibleThumbs,
moveSlideQty: visibleThumbs,
infiniteLoop: false,
slideWidth: 200,
minSlides: 4,
maxSlides: 4,
slideMargin: 10
});
}
});
});
.gallery-container {
width: 350px;
height: 300px;
}
.gallery-thumbs-container {
width: 350px;
height: 300px;
}
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/jquery.bxslider.css" rel="stylesheet" />
<link href="http://www.danmanning.co.uk/dev/bxslider/gallery/css/gallery.bxslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/gallery.bxslider.js" type="text/javascript"></script>
<script src="http://www.danmanning.co.uk/dev/bxslider/gallery/js/jquery.bxslider.js" type="text/javascript"></script>
<div class="gallery-container">
<div id="gallery" class="gallery-images">
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-silver-blue.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-cherry-red.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/metalic-ivory.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-white.jpg" alt="" />
<img src="http://almonard.co.in/images/products/domestic/ceiling/new-super-delux-brown.jpg" alt="" />
</div>
<div class="gallery-thumbs-container">
<ul id="gallery-thumbs" class="gallery-thumbs-list">
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-silver-blue.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-cherry-red.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/metalic-ivory.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
<li class="thumb-item">
<div class="thumb">
<a href="">
<img src="http://almonard.co.in/images/products/domestic/ceiling/thumbs/new-super-delux-white.jpg" alt="" />
</a>
</div>
</li>
</ul>
</div>
</div>
Update this line
gallerySlider.goToSlide($(this).closest('.thumb-item').index() -6);
to
gallerySlider.goToSlide($(this).closest('.thumb-item').index() );
http://jsfiddle.net/C3Sr3/23/
Looking to condense the jQuery I have here into a few lines, I know it can be done but I can't seem to get it to work looking at other posts and round the web...
HTML
<h2>Meet The Team</h2>
<img src="img/1.png" id="team" class="team" />
<img src="img/1.png" id="team1" class="team" />
<img src="img/1.png" id="team2" class="team" />
<img src="img/1.png" id="team3" class="team" />
<img src="img/1.png" id="team4" class="team" />
<img src="img/1.png" id="team5" class="team" />
<div id="teamintro" class="teamintro">
<h3>Matt</h3>
<p>personal intro </p>
</div>
<div id="teamintro1" class="teamintro">
<h3>Garrett</h3>
<p> </p>
</div>
<div id="teamintro2" class="teamintro">
<h3>Erik</h3>
<p> </p>
</div>
<div id="teamintro3" class="teamintro">
<h3>Matt</h3>
<p> </p>
</div>
<div id="teamintro4" class="teamintro">
<h3>Chi</h3>
<p> </p>
</div>
<div id="teamintro5" class="teamintro">
<h3>Daemon</h3>
<p> </p>
</div>
jQuery
<script>
$(document).ready(function() {
$('.teamintro').hide();
$('#team').hover(function() {
$('#teamintro').fadeIn(600);
},
function(){
$('#teamintro').hide();
});
$('#team1').hover(function() {
$('#teamintro1').fadeIn(600);
},
function(){
$('#teamintro1').hide();
});
$('#team2').hover(function() {
$('#teamintro2').fadeIn(600);
},
function(){
$('#teamintro2').hide();
});
$('#team3').hover(function() {
$('#teamintro3').fadeIn(600);
},
function(){
$('#teamintro3').hide();
});
$('#team4').hover(function() {
$('#teamintro4').fadeIn(600);
},
function(){
$('#teamintro4').hide();
});
$('#team5').hover(function() {
$('#teamintro5').fadeIn(600);
},
function(){
$('#teamintro5').hide();
});
});
</script>
So what I am looking to do it to get the persons info to appear when you hover over the image of the said person.
jQuery passes the DOM element on which the event occurred to your function as this, so you can easily get its id and use that:
$('.team').hover(
function() {
var num = this.id.substring(4); // Remove the "team" prefix
$('#teamintro' + num).fadeIn(600);
},
function(){
var num = this.id.substring(4); // Remove the "team" prefix
$('#teamintro' + num).hide();
}
);
The selector .team matches all of your elements with the team class. Within the callbacks, this is the DOM element, so this.id is its id. .substring(4) removes the team prefix.