This is the real situation:
As I said I have 12 different DIV's and a page like this.I have linked the js file already
index.html:
<div id="images_puzzle">
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
</div>
</div>
Notive the I have combined Jquery.js with my own js file.
this is where I can't get what I want. By hovering the mouse over each image I want to call a function, all other attributes are working well but this one is not.
webroot.js:
function setPuzzleImages() {
// alert('loading images...');
var $index = 1;
var $IMGs = $('#images_puzzle IMG');
$IMGs.each(function () {
$(this).attr({ 'src': 'images/105-100/' + $index + '.jpg','onmouseover':'showTitle('+$index+');'});
$index++;
});
}
function showTitle($index) {
alert('this is the'+$index+'image');
}
The only problem I could see is that the method showTitle may not be in the global scope so try
$myImg = $('img')
$myImg.attr({
src: 'myPic.png'
}).mouseover(showTitle);
function showTitle() {
alert('Hello World');
}
Demo: Fiddle
Your ode works fine if you add the method to global scope
Demo: Fiddle
Based on the update
function setPuzzleImages() {
var $IMGs = $('#images_puzzle IMG');
$IMGs.mouseover(showTitle).attr('src', function (i) {
return 'images/105-100/' + (i + 1) + '.jpg'
})
}
function showTitle() {
console.log('Hello World', this);
}
Related
I have my code set so that an image can change after clicking the image. I understand getElementById is meant to get results from one class name, but I don't know how to expand on that, and have the same result without changing the class name. I tried querySelector, but I think I am missing something. Any help would be appreciated. Here is my code:
<!--how do I make this apply to all images?-->
function changeImage() {
let displayImage = document.querySelector('#img-area, #star-picture, #colorful')
if (displayImage.src.match('Kabuto.jpg')) {
displayImage.src = 'PersonalCreations/LylatForce.jpg'
} else {
displayImage.src = 'Kabuto.jpg'
}
}
<!--image area or main img-->
<div class="row">
<div class="column">
<img id="img-area" src='Kabuto.jpg' class="responsive" alt="" onclick="changeImage()" height="200" with="200">
<button class="first" onclick="document.getElementById('img-area').src='PersonalCreations/LylatForce.jpg'">Change Image</button>
</div>
<div class="column">
<img id="star-picture" src="Kabuto.jpg" height="200" with="200" />
<button onclick="document.getElementById('star-
picture').src='PersonalCreations/Year6969.jpg'">Change Image</button>
</div>
<div class="column">
<img id="colorful" src="Kabuto.jpg" height="200" with="500" />
<button onclick="document.getElementById('colorful').src='PersonalCreations/BallInTheShoeProductions.jpg'">Change Image</button>
</div>
<div class="column">
<img id="holiday" src='Kabuto.jpg' alt="" onclick="changeImage()" height="200" with="200">
<button onclick="document.getElementById('holiday').src='PersonalCreations/ChristmasFestivalProject.jpg'">Change Image</button>
</div>
</div>
<p>Hello World</p>
<script src="imgchanger.js"></script>
First, CSS styling and JavaScript should not be used inline with HTML. You should separate out those things.
Your issue is that you have:
let displayImage = document.querySelector ('#img-area, #star-picture, #colorful')
But, .querySelector() will only return the first matching element. You need .querySelectorAll(), which will return a collection of all matching elements.
Or, you can avoid all of that and do this:
// Set up a single event handler for all clicks in the document
document.addEventListener("click", function(evt){
// But test to see if the click originated at a button
if(evt.target.nodeName === "BUTTON"){
// Get the button's parent div and then the source of the first img within that
let img = evt.target.closest("div").querySelector("img").src;
// Find out which button was clicked by looking at its class
switch (evt.target.className){
case "first":
// Change the source
img = "PersonalCreations/LylatForce.jpg";
break;
case "second":
img = "PersonalCreations/Year6969.jpg";
break;
case "third":
img = "PersonalCreations/BallInTheShoeProductions.jpg";
break;
case "fourth":
img = "PersonalCreations/ChristmasFestivalProject.jpg";
break;
}
console.clear();
console.log("Image source is now: " + img);
}
});;
.img200x200 { height:200px; width:200px; }
.img200x500 { height:200px; width:500px; }
<!-- See how much cleaner the HTML is now that the CSS and
JavaScript have been separated out? -->
<div class="row">
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x200" alt="">
<button class="first">Change Image</button>
</div>
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x200" alt="">
<button class="second">Change Image</button>
</div>
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x500" alt="">
<button class="third">Change Image</button>
</div>
<div class="column">
<img src="Kabuto.jpg" class="responsive img200x200" alt="">
<button class="fourth">Change Image</button>
</div>
</div>
<p>Hello World</p>
So I have three DIVs with the same carousel effect. I am pretty sure I can use three different JavaScript codes to move one at a time but would like to make it as minimal code as possible. With the current code, when I click on the arrow once, all three of them moves. How can I get them to move separately?
There's three of the same one as the one below:
(function ($) {
$.fn.thumbGallery = function (settings) {
var $this = $(this);
return this.each(function () {
settings = jQuery.extend({
speed: 1000,
leftArrow: $this.find('.arrow-left'),
rightArrow: $this.find('.arrow-right'),
galleryContainer: $this.find('.gallery-inner'),
visibleImagesSize: 4
}, settings);
var imgElements = settings.galleryContainer.find('img').length;
var size = settings.visibleImagesSize;
//settings.leftArrow.hide();
if (imgElements > settings.visibleImagesSize) {
settings.rightArrow.show();
} else {
//settings.rightArrow.hide();
}
function animateLeft() {
var el = settings.galleryContainer.children(":last");
settings.galleryContainer.animate({
left: '+=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function animateRight() {
var el = settings.galleryContainer.children(":first");
settings.galleryContainer.animate({
left: '-=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function checkArrows() {
if (size === settings.visibleImagesSize) {
//settings.leftArrow.hide();
} else {
settings.leftArrow.show();
}
if (size === imgElements) {
//settings.rightArrow.hide();
} else {
settings.rightArrow.show();
}
}
settings.leftArrow.click(function () {
animateLeft();
size--;
checkArrows();
});
settings.rightArrow.click(function () {
animateRight();
size++;
checkArrows();
});
});
};
})(jQuery);
$(document).ready(function () {
$('.gallery').thumbGallery();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
<h2>Open Space</h2>
<p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
<center>
<div class="gallery">
<div class="arrow-left">
<div class="arrow-left-small">
</div>
</div>
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-tmb">
<img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
</div>
</div>
</div>
<div class="arrow-right">
<div class="arrow-right-small">
</div>
</div>
</div>
<span class="btn_margin">
<asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
</span>
</center>
</div>
The reason they move together is because you use the .gallery selector when you call thumbsGallery(), which applies to all elelements that have class="gallery" in the HTML code. What you can do is to simply add a unique id to each of the gallery and call thumbsGallery() with each of the selectors.
HTML:
<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>
Javascript:
$(document).ready(function () {
$('.gallery#executive_gallery').thumbGallery();
$('.gallery#conference_gallery').thumbGallery();
$('.gallery#open_gallery').thumbGallery();
});
JSFiddle: https://jsfiddle.net/3qeLumkp/1/
I have the following code
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
I want to add <a> before and after the image tag with jQuery. This would be the result:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
Edit: Details from comments
So far, I have tried like this:
<span class="phone"><img src="malsup.github.io/images/p1.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p2.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p3.jpg"></span>
<span class="phone"><img src="malsup.github.io/images/p4.jpg"></span>
i have add like
$('.phone').each(function() {
$(this).wrapInner('<a href="test.php" />');
});
Additional information from comments
I want to use a different url for each image, like:
<div id="slider">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
<img src="images/p3.jpg" />
</div>
You can do it using the JQuery wrap() function like so:
var arr = ['https://www.google.com/', 'https://www.yahoo.com/', 'https://www.bing.com/'];
$("#slider img").each(function(index, value){
$(this).wrap("<a href='"+arr[index]+"'></a>");
});
Here is the JSFiddle demo
Use .wrap()
Wrap an HTML structure around each element in the set of matched elements.
Here you can store different url in custom attributes which can later be used to wrap element.
$('#slider img').wrap(function() {
return $('<a />', {
"href": $(this).data('url'),
"class" : "myClass"
});
})
.myClass {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<img src="images/p1.jpg" data-url='facebook.com' />
<img src="images/p2.jpg" data-url='google.com' />
<img src="images/p3.jpg" data-url='example.com' />
</div>
I want to display only the first image in each div.className.
This...
<div class="className">
<p>Yo yo yo</p>
<p><img src="snoop.jpg" /></p>
</div>
<div class="className">
Helloooooo
<img src="biggie.jpg" />
<img src="tupac.jpg" />
<img src="coolio.jpg" />
Blah blah blah
</div>
<div class="className">
<div><img src="dmx.jpg" /></div>
<div><img src="willsmith.jpg" /></div>
</div>
Would display as...
[snoop.jpg]
[biggie.jpg]
[dmx.jpg]
ONLY the first image of each div.className would display, without all of the other content. The content is dynamic and changes frequently.
jQuery I've tried:
var imgarray = $(".className").find("img:first").attr('src');
for(i = 0; i < imgarray.length; i++){
$('body').append('<img src=\"'+imgarray[i]+'\">');
}
...
(to try to get the SRC of each image...)
$('.className').each(function() {
alert( $('img').attr('src') );
});
Nothing is working. Thanks for the help (in advance)! BTW, I'm very front-end HTML/CSS and not great at jQuery.
EDIT: Fixed typos (left out quote marks after image SRC's)
EDIT: Thanks so much everyone! Here's how I implemented the checked answer to work for me:
<style type="text/css">
.className {
display: none;
}
</style>
<div class="className">
<p>Yo yo yo</p>
<p><img src="snoop.jpg" /></p>
</div>
<div class="className">
Helloooooo
<img src="biggie.jpg" />
<img src="tupac.jpg" />
<img src="coolio.jpg" />
Blah blah blah
</div>
<div class="className">
<div><img src="dmx.jpg" /></div>
<div><img src="willsmith.jpg" /></div>
</div>
<script type="text/javascript">
$('.className').each(function() {
var imagesrc = $(this).find('img').first().attr('src') ;
$('body').append( '<img src=\"' + imagesrc + '\">');
});
</script>
You have to use .find() along with .first() to accomplish what you want.
Try,
$('.className').each(function() {
alert( $(this).find('img').first().attr('src') );
});
You can use .find() and the :first-selector
$('.className').find('img:first').show()
Demo: Fiddle
Here is a JavaScript solution that will do a linear search on each of the child nodes of the element with the class name className. The one question that needs to be asked is: By default, is each image hidden?
<div class="className">
<img style="display:none;" src="x" />
<img style="display:none;" src="x" />
</div>
<div class="className">
<img style="display:none;" src="x" />
<img style="display:none;" src="x" />
</div>
<div class="className">
<img style="display:none;" src="x" />
<img style="display:none;" src="x" />
</div>
<script>
var el = document.getElementsByClassName('className');
for(var a = 0; a < el.length; a++) {
for (var i = 0; i < el[a].childNodes.length; i++) {
if(el[a].childNodes[i].tagName == "IMG") {
el[a].childNodes[i].style.display="block";
console.log(el[a].childNodes[i].src);
break;
}
}
}
</script>
Demo: Fiddle
After clarifying your question, I made my answer in three parts.
Firstly, wrap text in hide span
$('.className').contents().filter(function(){
return this.nodeType == 3 && $.trim(this.nodeValue).length;
}).wrap('<span class="spanhide" style="display: none;" />');
Secondly, hide all images
$('img', '.className').each(function () {
var img = $(this);
console.log("hide->" + img.attr('src'));
img.hide();
});
Third, display first image in each className div
$('img:first', '.className').each(function () {
var img = $(this)
console.log("show->" + img.attr('src'));
img.show();
});
Till now I can grab the src of the image and display it in a fixed division, kind of like a pop up. But I want to hide the div element when the mouse is clicked outside the div. Please guide me how to do it, and also please correct me if my code can be improved. Thanks!
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display($(this));
});
});
function display($this) {
var source = $("img", $this).attr("src");
$(".pic img").attr("src",source);
$(".pic img").css("width","450px");
$(".pic").show();
}
html:
<div id="album">
<div class="pic">
<img src="" />
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/2 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
blur event of jquery can be used
$(".screen").bind('blur',function () {
hide($(this));
});
function display($this) {
$(".pic").hide();
}
Try like this
$(document).click(function () {
if ($(this).class != "pic") {
$(".pic").hide();
}
});
Live Demo