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
Related
I am trying to set the image source of an image object with javascript.
I have tried
<img src="" id="image" alt="">
<p id="change">Change</p>
$("#change").click(function () {
$("#image").attr("src", "some source");
});
The problem is that it seems it does change the src, but it doesn't work if the image wasn't loaded when the page loaded. So I cannot suddenly change to the logo of Stackoverflow. Can this be true? How can I then load the image while changing the source?
I had an issue similar to this a couple weeks ago, the easiest way I managed to solve the issue was by loading all image's you will need, and set all of the ones you don't need right away as hidden. Then when your action that causes the change is triggered, you can change the image visibility on the one you want to disappear and the one you want to be shown.
If you have bootstrap installed, it is as easy as adding and removing a class via jQuery
HTML
<img src="" id="image1" alt="">
<img src="" id="image2" alt="" class="hidden">
<p id="change">Change</p>
Javascript
$("#change").click(function () {
$('#image1').addClass('hidden');
$('#image2').removeClass('hidden');
});
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.
I am working on an image gallery with a zoom feature, but when I change images the zoom is not picking up the change. This is the first time I have ever used a jquery plugin so I am probably just needing a nudge in the right direction.
The problem is when I try to us the .swap() I am getting
TypeError: $easyzoom.swap is not a function
The API ref has this
.swap(standardSrc, zoomSrc)
Easily switch the standard and zoom image sources.
I am using EasyZoom http://i-like-robots.github.io/EasyZoom/
Code is pretty simple, zoom works on initial image, but when image swaps, zoom is still using original image. .swap() should take care of it, but for some (likely very simple) reason I can't get it to work.
HTML:
<div id="mview">
<div class="easyzoom easyzoom--overlay">
<a href="/media/test/IMG_20130403_084209_183.jpg" id="zoomsrc">
<img src="/media/test/sm_IMG_20130403_084209_183.jpg" width="349" id="zoomview" />
</a>
</div>
<!------>
<div id="imgbar">
<img src="/media/test/tn_IMG_20130403_084209_183.jpg" width="60" />
<img src="/media/test/tn_IMG_20130403_091502_782.jpg" width="60" />
<img src="/media/test/tn_IMG_20130403_091511_640.jpg" width="60" /></div>
</div>
Javascript
$(document).ready(function() {
var $easyzoom = $('.easyzoom').easyZoom();
$("#imgbar img").click(function(e) {
var bigImg=this.src.replace("tn_","sm_");
var bigImgSrc=this.src.replace("tn_","");
$("#zoomview").attr("src",bigImg);
$("#zoomsrc").attr("href",bigImgSrc);
console.log($easyzoom.data('easyzoom'));
// $('.easyzoom').swap(bigImg,bigImgSrc); //tried this too
$easyzoom.swap(bigImg,bigImgSrc);
});
});
Thanks for your time looking at this
M
You're not accessing the EasyZoom API. Each instance is saved via jQuery's internal storage to the target element and can be accessed like so: $easyzoomElement.data("easyZoom")
I've updated your example code (http://jsfiddle.net/spidre409/6Z89g/) here: http://jsfiddle.net/6Z89g/2/
I am trying to load a video onclick a image in my web page. For that i used the following code.
<script type="text/javascript">
(function($) {
$('a.newID').click(function(){
$('#newID').html('<iframe src="http://www.youtube.com/embed/TJ2X4dFhAC0?autoplay=1" frameborder="0" class="slide" allowtransparency="true" style="width:512px; height:288px;" id="ifm" title=""></iframe>');
});
}(jQuery));
</script>
The html code:
<a href="#" title="" id="newID"><span class="play_icon"><img src="img/play_overON.png" alt=""></span>
<img src="images/slider1.jpg" alt="" class="slide" />
</a>
If i click the image the image will be replaced by the iframe video. What i need is to display a loading icon until the video is loading. How to do that?
Please add following css properties in your click function:
#newID {background-image:url(http://mysite/myloadingimage.gif)}
You will also need to add css property display:inline-block; to #newID, if the display is inline (default).
Replace http://mysite/myloadingimage.gif with actual loading image. Use animated gif for the nice loading effect.
Loading image needs to be centered using css background property. This may depend on size of image.
I have a series of photos (3 series actually) that need to cycle, which the jQuery cycle plugin does nicely for me.
My problem is I also want to rotate them (rotate as in turn) by a few degrees each in varying directions on page load, to achieve a 'scattered' look. jQuery Rotate does this nicely too ... my problem is I can't get both rotate and cycle to happen on the same page.
It looks as if the solution is going to involve rotating the images within the cycle code itself, but that is beyond my limited capability (at least in the time available). Has anyone else tried this? Got any pointers?
If all else fails, I can pre-rotate the images in photoshop but that's not ideal--the js rotate would mean the photos can be easily refreshed by the site's owner simply dumping new ones in a directory. Photoshop otoh would mean rotating each one -and- converting them from jpg to a format that supports transparency (or even worse, duplicating the appropriate background colours etc in the right places).
I'm using standard jquery.cycle... html pre-loads 1st 3 images like this:
<div id="slideshow" class="pics">
<img class="rotate" src="images/image1.jpg" width="100" height="100" />
<img class="rotate" src="images/image2.jpg" width="100" height="100" />
<img class="rotate" src="images/image3.jpg" width="100" height="100" />
</div>
And I have the usual js that kicks off the cycle:
$(document).ready(function() {
var stack = [];
var imagesPath = '../images/image';
if(window.location.href.indexOf('\/html\/') == -1)
imagesPath = 'images/image';
for (var i = 0; i < 8; i++) {
var img = new Image(100,100);
img.src = imagesPath + i + '.jpg';
$(img).bind('load', function() {
stack.push(this);
});
}
// start slideshow
$('#slideshow').cycle({
timeout: 600,
before: onBefore ,
speed: 2000
});
// add images to slideshow
function onBefore(curr, next, opts) {
if (opts.addSlide) // <-- important!
while(stack.length)
opts.addSlide(stack.pop());
};
});
The js to rotate the first of these images with jQuery.rotate is:
$('.rotate')[0].rotateLeft(5);
The above works if I disable cycling, but nothing happens when cycling is on.
Removing the array reference per the following rotates the visible image, removes it from the slideshow, and leaves it on the page.
$('.rotate').rotateLeft(5);
Perhaps the ideal would be to rotate the containing div instead, but jquery.rotate uses canvas and so only works on images. Let me know if there's any more info I can provide. And thanks for your interest!
JQuery Cycle adds a lot of CSS to the immediate child images of a container in order to turn them into slides. If you want to scatter images on a slide, you should wrap the contents of each slide in a tag. Then tell JQuery cycle that those elements are, in fact, slides by using the slideExpr option.
Html
<div id="slideshow">
<div class="slide">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
<div class="slide">
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
</div>
</div>
Javascript
$('#slideshow').cycle({
slideExpr: '.slide',
timeout: 600
});
This will allow Jquery cycle to apply it's styles to the wrappers, and JQuery rotate to apply rotations to the contents inside each slide without stepping on each others' toes.
Here's the complete list of JQuery Cycle options.
try using the CSS3 transform selector:
-webkit-transform: rotate(-15deg);
$('.rotate').css({'-webkit-transform' : 'rotate(-5deg)' });