I generate the following pieces of code via php (unknown number in advance) and they are all wrapper in my 'item-container' div:
<div id="item-size" class="item-size">
<div class="view pic-transition">
<figure id="ribbonnew" class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
I generate a ribbon on SOME of these 'item-size' div's and via javascript i want the ribbon to be hidden when the mouse is hovered over and back to normal when mouse out.
My javascript code is:
$("#item-size").hover(function(){
$('#ribbonnew').hide();
},function(){
$('#ribbonnew').show();
});
This of course only works for the first element, so I guess I need to assign ID's to the 'item-size' div's ? How do I do this AND create the javascript which binds the mouse hover to every of these divs (how to pass the size of how many I created, so I could add ID's from 0 to size)?
As an extra question, is there also a way to make the ribbon fade in and fade out slowly? .fadeOut(1000); is not delivering the expected result
Remove all ids :
<div class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
And use a dot . in your selectors to match elements by classes :
$(".item-size").hover(function(){
$(this).find('.ribbonnew').hide();
},function(){
$(this).find('.ribbonnew').show();
});
For your extra question, you can use a parameter in the hide and show jquery methods for animation :
$(this).find('.ribbonnew').hide(400);
Edit : if the html is inserted dynamically, try event delagation instead :
$('#item-container').on('mouseenter mouseleave', '.item-size', function(){
$(this).find('.ribbonnew').toggle(400);
});
(if you really want to use ids)
Generate a unique id using the uniqid() function, and name all your item-size elements.
<?php
$unique_id = uniqid();
?>
<div id="<?=$unique_id?>item-size" class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
Then, match all elements with that unique id as part of their ids.
$("*[id^='<?=$unique_id?>']").hover(function(){
$(this).find('figure.ribbonnew').hide();
},function(){
$(this).find('figure.ribbonnew').show();
});
Related
I'm having trouble getting an image to show up that has been written within in a body. The specific image being the <img src="Images/Attachments/Shining.gif">
Not too sure if the script needs to be altered or if I would have to put it inside its own class. When I tried to append, the image showed up in both emails instead of the one I wrote it in. I'm coding this using Twine, Sugarcube btw!
<div class="header">
<div class="hamburgerWrapper">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="EmailsWrapper">
<div class="ExtendMsg">
<p>Extended Messages will be placed under here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User.png>
</div>
<div class=" EmailTitle">
<p class="EmailTime">9:31 PM</p>
<h1>Sender</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Email content to be filled out here.</p>
</div>
</div>
<div class="Email">
<div class="ImgWrapper">
<img src="Images/Phone Icons/User2.png">
</div>
<div class="EmailTitle">
<p class="EmailTime">9:29 PM</p>
<h1>Sender2</h1>
<h2>Subject Title</h2>
<p class="EmailPreview">Here is a gif for your memeing pleasure. <img src="Images/Attachments/Shining.gif"></p>
</div>
</div>
<<done>>
<<script>>
$(".Email").on("click", function() {
$(this).addClass("active");
$(".Email").not(".active").addClass("deactive");
$(".ExtendMsg").addClass("active");
$(".ExtendMsg").html($('
<div />').html($(".EmailPreview", this).text()));
$(".headerLabel h1").text("MESSAGES");
});
$(".hamburgerWrapper").on("click", function() {
$(".Email.active").removeClass("active");
$(".Email.deactive").removeClass("deactive");
$(".ExtendMsg").removeClass("active");
$(".headerLabel h1").text("MESSAGES");
});
<</script>>
<</done>>
I'm not totally sure what you are trying to achieve.
But I'd guess that you want to show and image, when ever you click something above?
If that is so, the classes are not met to handled that kind of jobs in Javascript. You might do so, if you assign the image to a Class property background-image: url("heregoesyourimages.png") but there are better ways to handle that kind of behavior.
If you have to use JQuery, you can use simply the method: "Show" or "Hide" that will display in and out an element:
First assign an identifier to your element to toggle (class or id):
<div class="ImgWrapper">
<img class="User2Image" src="Images/Phone Icons/User2.png">
</div>
Then, use the method $(".User2Image").Hide(); to make the image appear or disappear (what this do actually is that adds the property Display:none, to the element (correct me if I'm wrong its been a while since I used JQuery) or $(".User2Image").Show(); to show again the image.
I have a webpage on which a lot of images need to load. I want to show a div with a loading gif while the image is loading, but I want to fade out that div when the image is done loading. When I was searching the internet I found the ".load" function, but that's not working on the images. The ".on('load', function(){...})" doesn't work either.
This is what I tried, but doesn't work.
<a data-fancybox="gallery" href="image1.jpg">
<img src="thumbs/image1.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image2.jpg">
<img src="thumbs/image2.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image3.jpg">
<img src="thumbs/image3.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
This is actually working fine.
https://codepen.io/tmdesigned/pen/NWqqXwy
Probably what you are experience is conflict with the gallery library you are using. They often duplicate images in the HTML to achieve their effects. I'd suggests looking at the final output in your inspector and see if the .next() logic still holds.
But, to answer your question if you remove that gallery, as I did in the link above, you'll see the 'loading' image fade out (in the example, all 6 images--3 display images, 3 loading images--are the same, but you can still see the effect).
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
i am trying to create a responsive image that when to click on it another image opens and when you click on the new picture it goes away... disappears.
thanks !!
this is my code:
<div class="item">
<div id="img1"><"https://www.istockphoto.com/il/photos/lion-cub?excludenudity=true&sort=mostpopular&mediatype=photography&phrase=lion%20cub" /></div>
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick=diffImage(this) />
<img src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.display='none';"/>
</div>
The below code works in a similar approach to yours.
I have used the visibility CSS property instead of display and added the correct javascript into the onclick event of the first image
<div class="item">
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick="document.getElementById('other-image').style.visibility='visible'" />
<img id="other-image" src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.visibility='hidden';"/>
</div>
I would recommend looking in to javascript in more detail to be able to do this in a more reproducible way.
I am developing a responsive Slide show where the user can upload any number of images, and the application dynamically generates a slide show that can fit in any device. Now there is a problem i am facing here
<section id="container">
<article id="slider">
<div id="item"><img src="img/image-1.jpg" alt="" /></div>
<div id="item"><img src="img/image-2.jpg" alt="" /></div>
<div id="item"><img src="img/image-3.jpg" alt="" /></div>
<div id="item"><img src="img/image-4.jpg" alt="" /></div>
<div id="item"><img src="img/image-3.jpg" alt="" /></div>
<div id="item"><img src="img/image-4.jpg" alt="" /></div>
</article>
<article id="nav">
<div id="prev" onclick="prev();"><img src="img/prev.png" alt="" /></div>
<div id="next" onclick="next();"><img src="img/next.png" alt="" /></div>
</article>
</section>
The above Html code is generated by my java code. Here the user has uploaded 5 images. Now each image will occupy a fixed with of 300 px. so total width will be 5*300+5*padding. Now i can set the width of the container dynamically in my java code to fit all the images in a single row, and hide the ones the exceed 940px, as seen in most normal slide shows. I want know whether there is a css solution to this like shrink wrapping which shrinks the inline divs, here i want to expand the container.
Regards,
Maclean
I would suggest use display:inline-block to inner elements, and white-space:nowrap for outer div. If you can create a jsfiddle that would be helpful to show code changes.
Here is my JsFiddle
I am trying to create an image gallery. I want my each image to open up inside a modal window when someone click on any image. I have designed my modal window. i just don't know how to connect my modal window to my images in the image gallery. I want the clicked-in image to appear inside the img tag of my modal window.
This is my first time i am trying to do something with modal window. i have no idea how to write that click event handler for my case. I searched in net. I did not find any matching solution. All were suggesting to use their own plugins. I don't want to use others plugins for this. A little help would be appreciated.
Here's is my image gallery
<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<img class="wideimage" src="">
<!--more images-->
</div>
<div class="row">
<img class="normalimage" src="">
<img class="normalimage" src="">
<!--more images-->
</div>
</div>
Here is my modal window
<div class="gallery-overlay" style="display: none;">
<div class="gallery-imagebox">
<img class="gallery-image" src="#">
</div>
<div class="gallery-captionbox">
<div class="gallery-control gallery-control-previous">
<
</div>
<div class="gallery-control gallery-control-next">
>
</div>
</div>
</div>
Using jQuery you could start with this:
$(function(){
$('.gallery').on('click','a',function(){
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',$(this).find('img').attr('src'));
return false;
});
});
Have a look at this this fiddle