At this current iteration, I have it where if a user clicks on an image thumbnail, the thumbnail image displays in a different div (the main div) and in doing so, it rewrites the main div img src attr with the thumbnail img attr minus the "-thumbnail". This part is good, or at least I believe it is.
With that said, after the user clicks on a thumbnail and the main div img appears, it lingers...and what I mean by lingers is that for example, if a user closes the div and re-opens it or another div just like it, the last image shows (stays) when it shouldn't in the main div. Instead, it should be showing the first thumbnail img in the main div...
Any suggestions is appreciated and below is what I currently have (or at least a portion of it). There is a lot more, but below is the main stuff that's giving me troubles...
The HTML part is within a div class called "t_1". I have 24 of these..."t_1", "t_2", "t_3" respectively. And within this class, I have what is posted below in all using the same div classes. The only difference is the folder names in the img tag.
So, when a user clicks on that thumbnail and that thumbnail image gets rewritten so that it can be displayed in the main div "t_main_screenshot", all is good...but then, if the user clicks out of the "t_1" etc. divs, and opens up another "t_2", that last image thumbnail that was clicked previously shows in the main div (t_main_screenshot) instead of the first image thumbnail for what should be in "t_2"...
Hopefully this is a bit better in clarity...It's kind of hard to explain.
HTML:
<div class="t_main_screenshot">
<img src="_framework/images/slides/simplicity/2.png" alt="" title="" />
</div>
<div class="t_thumbnail_wrapper">
<div class="t_thumbnail active">
<img src="_framework/images/slides/simplicity/2-thumbnail.png" alt="" title="" />
</div>
<div class="t_thumbnail">
<img src="_framework/images/slides/simplicity/4-thumbnail.png" alt="" title="" />
</div>
<div class="t_thumbnail">
<img src="_framework/images/slides/simplicity/6-thumbnail.png" alt="" title="" />
</div>
</div>
JS/JQuery:
$('.t_thumbnail').click(function() {
$('.t_thumbnail').removeClass('active');
$(this).addClass('active');
var thumbNail = $(this).find('img').attr('src');
$('.t_main_screenshot img').fadeOut(0, function() {
$(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
});
});
Try this code :
$('.t_thumbnail').click(function() {
$('.t_thumbnail').removeClass('active');
$(this).addClass('active');
var thumbNail = $(this).find('img').attr('src');
$(this).parent().parent().siblings().find('.t_main_screenshot').children('img').fadeOut(0, function() {
$(this).fadeIn().css('animation','scale-in .75s ease-in 0s forwards')[0].src = thumbNail.replace('-thumbnail', '');
});
});
As you are updating directly on .t_main_screenshot class. So it will update all places, in this case in all your modals .t_1, .t_2, ...etc.
$('a.screenshots_1').click(function() {
$('.t_main_screenshot img').find('img').attr('src' , "");
});
This will help you to initialize the main screenshot on modal screenshot icon click.
Related
When the user clicks a "Vacation" image on the left, a larger copy
of it will appear to the right of the images in the image with
an id of "currentimage" inside the "bigimage" div. (See the HTML file)
At the same time one of the following should appear below
the "currentimage": "Mountain Vacation", "Ocean Vacation", or "Desert Vacation"
depending on which image was selected.
this is part of the HTML code
<div id="bigimage">
<img id="currentimage" src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
<p id="imagedesc"></p>
</div>
This is part of the JS code
$("img").click(function ()
{
var mySrc = $(this).attr("src");
$("#currentimage").attr("src", mySrc);
$("#imagedesc").html(this.alt);
});
I also tried
$("img").click(function ()
{
$("#currentimage").attr("src", this.src);
$("#imagedesc").html(this.alt);
});
but when i click the image a larger copy of it is not appearing on the right
Browsers not reload image after change src. Try remove old element with old image and paste new element with new image src.
Or: How to reload/refresh an element(image) in jQuery
Your click handler is on any img this means that the #currentimage element is the only element which this handler is added. You are then setting the src to the src that it already is.
you instead want to change the src to something else. Here I set an initial smaller placeholder which is replaced with a larger one on click.
$("img").click(function() {
this.src = 'https://placeimg.com/500/500';
$("#imagedesc").html(this.alt);
});
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<img id="currentimage" src="https://placeimg.com/200/200" alt="ocean vacation" />
<p id="imagedesc"></p>
I am building a very simple product gallery, just 2 thumbnails with 1 enlargement to show/front back of a product. I have got the image switch working and opacity on the thumbnail, on hover, please see code pen:
http://codepen.io/anon/pen/NGeBWB (for some reason the code-pen does not switch images, it works fine locally, but it still illustrates the issue).
.button:hover { opacity:0.8 }
function switchImg(i) {
document.images["wine"].src = i;
}
All I want is the thumbnails to swap opacity, so when the thumbnail is clicked, it gets the opacity to indicate its accompanying big image is being displayed and visa versa, if anyone wants to put some CSS ease-in effects/fades etc then that would also help.
Check your console output (Failed to load the resource). You have an 406 data error - server is not allowing access to the file. Check the file permissions of the image on your server (should at least be 644) and that you have MOD permissions set to allow remote image requests.
Please find the changes below. The issues are :
You need to mention the full image path while calling the function.
It is better to use the document.getElementById while pointing an dom element exclusively.
function switchImg(i) {
document.getElementById("imageSRC").src = i;
}
.button:hover {
opacity: 0.8
}
<img id="imageSRC" src="http://bonrouge.com/wine.jpg" id="wine" height="500" width="300" alt="">
<a href="#" onClick="switchImg('http://bonrouge.com/wine.jpg')" class="button">
<img src="http://bonrouge.com/wine.jpg" height="100" width="100" alt=""></a>
<a href="#" onClick="switchImg('http://bonrouge.com/beer.jpg')" class="button">
<img src="http://bonrouge.com/beer.jpg" height="100" width="100" alt=""></a>
Code Pen : http://codepen.io/kishoresahas/pen/epbjRm
i'm trying to create a page filled with thumbnails, and on click, another div Full(to show the thumbnail image in full screen) will pop out, i will retrieve the src of the thumbnail img and pass into the Full div to display the clicked image.
This is what i have so far, fiddle: http://jsfiddle.net/mwhLoyy8/1/
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/BjVeUYS.png" alt="logo">
</div>
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" alt="logo">
</div>
for now i am detecting test_img click, and retrieving from js with
img = $('<img />', {src : this.src,
'class': 'full_image_pic'
});
this.src works fine, but i want to change to detecting on img_section instead of test_img, but i don't know how to retrieve the src, i tried this.test_img.src but it doesn't work.
Reason why i want to detect the div instead of the img directly is because in my real working file i have overlay another and while mouseover on the thumbnails, which the detection will not work on the words, since i only make it image-detectable only, so i want to change to detecting the parent div instead.
Another thing is, once i display the full image, how do i display unique Title & description under the full image displayed? Please guide me! Thanks
for Kamal
<div class="popUp">
<div class="fullPic">
<img class="full_image_pic" src="images/pic1.jpg" alt="logo2">
<div class="full_image_desc">
<h3 class="desc">Title</h3>
<p class="desc">My desc</p>
</div>
</div>
You can get the src with jQuery attr
img = $(".test_img").attr('src');
and change the src by
$(".full_image_pic").attr('src', img);
Please also take a look at this exmaple.
For changing title and description dynamically, you can add attributes in your original image;
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" img-title="some title" img-desc="some description" alt="logo">
</div>
Than use the attr to change the info.
title = $(".test_img").attr('img-title');
and using .html change the content of title/description
$(".full_image_pic .desc").html(title);
You can use class or ID to select an image and change image src
$(".image class or #ID").attr("src", "file name");
$(".photo").attr("src", "photo.jpg");
$("#logo").attr("src", "new-logo.jpg");
Use
$(".test_img").attr("src","abc.jpg");
Is this too complicated to achieve? Hopefully my question or title makes sense. Essentially I have two divs - one is and the other is . I have 12 images inside of each div that I thought I attached IDs to. I'm still much of a noob to web coding so perhaps I'm labeling them wrong. But here's my goal, whenever you hover over artwork1, the opacity of artwork1 and button1 should change simultaneously. And the effect needs to be achieved the other way as well (ie hover:button1 should change the opacity of artwork1). Below is my code to explain my case further:
<html>
<body>
<div id="buttons">
<img src="..." class="spaced"(to spaced the buttons)>
<img src="..." class="spaced">
<div id="artwork">
<img src="..." class="mainbuttons & greydout"
<img src="..." class="mainbuttons & greydout">
The 'mainbuttons' class is for spacing between the 12 images. And the greydout class is to alter the hover effect already in place - going from opacity 0.3 to 1.
I've tried to research some javascript as I'm thinking that's the most proper solution. My javascript I've tried to use is as follows:
$(document).ready(function() {
$("#button1").mouseenter(function(){
$("#artwork1").addClass("opac_art");
});
$("#button1").mouseleave(function(){
$("#artwork1").removeClass("opac_art");
$("#artwork1").addClass("greydout")
});
});
One more thing to consider is that I have multiple scripts running for various functions:
1) a redirect script that will redirect mobile viewers to the mobile site;
2) a respond script that reformats the viewport to whatever the viewer's resolution browser size is set to.
I have the jQuery loaded up at the top of the document, but could there be conflict with the other scripts running on the html page?
I've even tried going the CSS route and I can barely get the divs to interact with each other. The closest I've come is when I hover in the button div, I can alter artwork 1, but not as specific as I'm aiming for. I hope all this makes sense, and thanks in advance for reading all this and trying to help me through this huge roadblock to getting my site up.
Try something like this.
Add a class to your buttons (galleryButtons) and to your images in the other div.
First of you do not really need the wrapping with the a tag
Add classes to your button elements and artwork.
<div id="buttons">
<img id="gbutton1" class="galleryButtons" src="button.png" />
<img id="gbutton2" class="galleryButtons" src="button.png" />
<div id="artwork">
<img id="artwork1" class="artworkImage" src="art1.jpg" />
<img id="artwork2" class="artworkImage" src="art2.jpg" />
$(document).ready(function () {
var intID;
$(".galleryButtons").hover(function (e) {
console.log(e.target.id);
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#artwork" + intID).addClass("opac_art");
}, function () {
$("#artwork" + intID).removeClass("opac_art").addClass("greydout");
});
$(".artworkImage").hover(function (e) {
var id = e.target.id;
intID = id.replace(/^\D+/g, '');
$("#gbutton" + intID).addClass("opac_art");
}, function () {
$("#gbutton" + intID).removeClass("opac_art").addClass("greydout");
});
});
All for you in a fiddle: http://jsfiddle.net/djwave28/et6tD/4/
It can be made simpler with selecting smarter, but I wanted you to see the relation in the element better. When you hover over an element, the element that causes the event is send to the function. This event contains information. Like e.target.id will hold the id of that element.
http://www.w3schools.com/jsref/dom_obj_event.asp
From what I'm understanding of your question, you could do something like this:
$(document).ready(function()
{
$("#one").hover(function()
{
// Changes the opacity of the first image
// as well as the corresponding link from
// 1 to 0.3.
$("#artone").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
$("#two").hover(function()
{
$("#arttwo").css({ "opacity": "0.3" });
$(this).css({ "opacity": "0.3" });
});
});
And the HTML would look something like this:
<div id="links">
Link one
Link two
</div>
<div id="artwork">
<img src="" id="artone" class="spaced">
<img src="" id="arttwo" class="spaced">
</div>
Couple extra things -
Make sure you actually link jQuery into your page's header, I didn't see it above:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
That's from Google's CDN, but you can do it locally, of course.
<img src="#" class="mainbuttons & greydout">
When listing classes for an element, you don't add an ampersand (&), you just leave them with a space in between.
<img src="#" class="mainbuttons greydout">
I'm trying to figure out how to load a new image with ajax when a link is clicked on.
The link looks like this (there are several links like this on the page they have little image thumbnails inside them so user can know approximately what image will load when he/she clicks on the link):
<div class="box-content2">
<a href="/path/to/image/2.jpg" id="2">
<img src="/path/to/image/thumbnail/2.jpg" title="Image Title 2" />
</a>
<a href="/path/to/image/3.jpg" id="3">
<img src="/path/to/image/thumbnail/3.jpg" title="Image Title 3" />
</a>
</div>
Href attribute contains relative path to the image and the id is the image name (also it's id in the database if it's relevant).
And on the same page I have this markup:
<div id="media-photo">
<img src="/path/to/image/1.jpg" alt="Image Title 1" />
</div>
I would like the image in #media-photo div to change without the page being reloaded.
This is what I have so far:
$(document).ready(function() {
$('.box-content2 a').click(function() {
var path = $(this).attr('href');
$('#media-photo img').html('<img src="' + path + '" />');
});
});
Not sure if what I'm doing is possible, maybe I need ajax?
You're definitely on the right track:
$(document).ready(function() {
$('.box-content2 a').click(function() {
var path = $(this).attr('href');
$('#media-photo img').attr('src', path)
.attr('alt', $('img', this).attr('title')); // in anticipation of your need
return false; // stop the default behavior (following the link)
});
});
The html method sets the html content of the element it's called on.
Your code is putting a new IMG element inside the old one, which is meaningless.
You need to to use the attr method to set the src attribute of the existing image, like this:
$('#media-photo img').attr('src', path);
Also, you need to add return false; to the end (or call event.preventDefault() and take an event parameter) to prevent the browser from following the link.