Im in the middle of creating a site and have run into a bit of an issue. Basically what im working with is a collection of 3 pictures, two small, one large. What I'd like is that when you click one of the small pictures, it takes the spot of the larger picture. I have a javascript function that does this successfully but with one minor issue. Theres 3 of these collections of 3 pictures and thus when you click a small image to have it swap with the bigger one, the small image takes the spot of all of all 3 of the larger images instead of just the one for its section. Any suggestions? Thanks
the javascript function
$(document).ready(function(){
$('img').click(function(){
var url = $(this).attr('src');
var bigUrl = $(this).parents('.picture-container').find('.large-picture > img').attr('src');
$('.large-picture > img').attr('src', url);
$(this).attr('src', bigUrl);
});
});
what one of the sections looks like
<div class = 'main-content'>
<div class = 'picture-container'>
<div class = 'large-picture' style = 'width:50%;height:100%;float:left;'>
<img src = 'close_table_dupontstudios.png' width = '100%' height = '100%'>
</div>
<div class = 'picture-content' style = 'float:right;width:45%;height:100%;'>
<div class='picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
<div class='picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
<div class = 'small-picture-wrapper'>
<div class = 'small-picture' style = 'float:left;height:100%;'>
<img src = 'hair_and_makeup_dupontstudios.png' width = '100%' height = '100%'>
</div>
<div class = 'small-picture' style = 'float:right;height:100%;'>
<img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
</div>
</div>
</div>
</div>
You're using a class selector for .large-picture when you're selecting it to apply the new image src. Presumably, all three sections have an element with this class, meaning all three are selected by your .large-picture selector. You need a more explicit selector to get ONLY the appropriate element.
You could use an id, or you could use parents() and find() in conjunction like you did previously:
$(this).parents('.picture-container').find('.large-picture > img').attr('src', url);
Related
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden; ">
<div data-p="170.00" >
<img data-u="image" src="../../../Admin/Products and Services/images/<?php echo $img1 ;?>" />
</div>
<div>
In this Jssor slider how can I change sliders div max width to image width. Link to the jssor slider is given belowJssor Slider. Thank You!
Assuming you might have more sliders on the page and more images in each slider, this is the way to go:
document.querySelectorAll("[data-u=slides]").forEach(slider=>{
var maxWidth=0;
slider.querySelectorAll("img")
.forEach( image => {
maxWidth=Math.max(maxWidth,image.width)
});
slider.style.maxWidth=maxWidth+"px";
})
Here is a quick demo how you can do it:
var imageFrame = document.querySelector("div[data-u='slides']");
var imagediv= imageFrame.querySelector("div[data-p='170.00'] > img");
console.log("before: " + imageFrame.offsetWidth, imagediv.offsetWidth);
imageFrame.style.width = imagediv.offsetWidth+"px";
console.log("after: " + imageFrame.offsetWidth, imagediv.offsetWidth);
I assumed you wanna stretch the outer div holding the inner div to the size of the inner image of inner div. I also assumed no libs, vanilla only. I also assumed you want it compatible with older browsers so no fancy stuff like arrows.
If you got multiple photos you are gonna need to add their sizes up with possible margins, borders and paddings in between. That one would require me to see your entire HTML with CSS that styles it so I know what I need to take into account.
Here is a demo with photo off the internet:
fiddlejs
Ofc, remove the console logs, they are there in for demo only.
I have gone through the answer posted earlier on this website but my slideshow does not work and shows the first image always.
Below is my code
<div id= slideshow>
<img class ='imagem_artigo' src="/images1/coveover.jpg" name="Myslide" width=750; height=300 align="middle">
<script type="text/javascript">
var step = 1;
var img1 = new Image();
img.src = "/images1/tecover.jpg";
var img2 = new Image();
img2.src = "/images1/te.jpg";
var img3 = new Image();
img3.src = "/images1/te1.jpg";
var img4 = new Image();
img4.src = "/images1/im7.jpg";
function slideshow(){
document.images.Myslide.src = eval("img" + step+".src");
if(step<=4)
step++;
else
step = 1;
setTimeout(function(){slideshow()},1000);
}
slideshow();
</script >
</div>
When building sliders it's better to write the majority of what you want to show in the DOM so it'll load and search engines can find it etc.
Here's what I would do
<div id="imageSlider">
<div class="imageSliderContainer clearfix">
<div class="article">
<img src="/images1/coverover.jpg" width="" height="" alt="write stuff here etc" title="">
</div>
<div class="article">
<img src="/images1/tecover.jpg" width="" height="" alt="" title="">
</div>
<div class="article">
<img src="/images1/te.jpg" width="" height="">
</div>
<div class="article">
<img src="/images1/te1.jpg" width="" height="">
</div>
<div class="article">
<img src="/images1/im7.jpg" width="" height="">
</div>
</div>
</div>
using alt and title will mean your html will be wc3 compliant ;) also the image can be found using an internet search :) or whatever
Now you wanna build a slideshow huh? I'll show you some cool CSS to get you going first then I'll come back to the javascript :p
first off, we want to make sure people who haven't got javascript enabled are able to view your images don't we? So lets make a nice scroll window looking thingy for those special paranoid people with no javascript :p
#imageSlider{overflow:auto;}
Now anything that's over 100% width of #imageSlider will be scrollable.
I've used classes called articles. The reason I've done this will become much clearer later :) but for now this is simply why.
There are 5 articles and you want each to be 100% of the parent so that the others aren't showing when you're on that image right? So 5*100=500
.imageSliderContainer{width:500%;}
100/5=20
.imageSliderContainer .article{width:20%;float:left;}
.clearfix:after{clear:both;display:block;visibility:hidden;content:'';}
Now each article/image will be 100% width of the parent so they won't be visible when one is selected :p
and the clearfix and float will make the articles inline with each other :) without causing conflicts with other elements
Next we want to make sure our images look cool inside the article. and they're properly positioned and sized so they're not outside of the container etc.
.imageSliderContainer .article img{max-width:100%;height:auto;display:inline-block;}
.imageSliderContainer .article{width:20%;text-align:center;background:#000000;}
now things should be starting to look rather nice and smooth right? IF you're still following :p
Next comes the javascript. I'm more fluent in jQuery but I'll give examples of both just incase :)
First off we want to turn off the scrolling
$('#imageSlider').css({'overflow':'hidden'});/*jquery*/
document.getElementById('imageSlider').style.overflow="hidden";/*javascript*/
Next we want to make the images 'change' when really what I'm going to do is scroll the element along so we can see the next one ;p
Some people like to use a negative margin left but some designers are like "AGHHHH NEGATIVE VALUES" for some reason so I'll just use scrollLeft instead :p
this is where it's ganna get a little complicated. First you want to get the current location of the container's scrollLeft then adjust it.
/*jQuery*/
function nextSlide(){
var sliderScroll=$('#imageSlider').scrollLeft();
var artWid=$('.article').width();
var artQuant=$('.article').length;
var next=0-(sliderScroll==((artQuant-1)*artWid))?0(sliderScroll+artWid);
$('#imageSlider').animate({scrollLeft:next},500);
}
/*javascript*/
function nextSlideA() {
var slider=document.getElementById('imageSlider');
var art=document.getElementsByClassName('article');
var next=0-(slider.scrollLeft==((art.length-1)*art[0].offsetWidth()))?0:(art[0].offsetWidth()+slider.scrollLeft);
document.getElementById('position').innerHTML=next;
slider.scrollLeft = next;
}
the variable next will equal 0 if you're on the last image and will go to the next image if you're in the middle of the slideshow :)
Javascript won't look as fancy as jQuery but it'll get the job done. I'm sorry if I've made any mistakes I'm currently on the phone as I'm writing this, let me know if something doesn't work and I'll fix it :)
Next just simply call the function using your setInterval();
var slider=setInterval(function(){nextSlide();},1000);
And job done :) Hope this was helpful! I'll make a quick jsfiddle for you so you can see how it all works :)
http://jsfiddle.net/s6crzzfr/
So I have a section where I'd like to click on the image and have .speaker-info animate open by toggling class .open on .speaker-container to animate the height to reveal .speaker-info while toggling the class .hover for a hover state image. A .fade class also gets toggled on to .speaker-info to change the opacity. I got everything working fine if I click one image and close it with the same location, but when I open one and click another image everything closes, so I'll need two clicks to open the other, and the hover image states on for the previous image.
So I'd like to open one div and then if another image clicked, all close and the recent one opens.. I've been going around in circles trying to figure the best way to do this.. but I keep hitting a wall.
I'm basically triggering everything by toggling css classes to create the opening/closing and hovering.
Here's my code.
Also, I'm looking for opinions on how to make my code more nimble, and more efficient, sometimes I feel like I write waaay to much where I could do the same with a few lines less.
Thanks!
<section id="speakers">
<div class="container">
<div class="row">
<div class='speaker-container'>
<div class="span3 offset1" id="{row_index}">
<div class="speaker-img">
<img src="{speaker_image}" alt="{speaker_name}" class="hover">
<img src="{speaker_hover}" alt="{speaker_name}">
</div>
<h4>{speaker_name}</h4>
</div>
<div class="speaker-info">
<button class="close-speaker">Close</button>
<h3>{speaker_name}{if speaker_title}, {speaker_title}{/if}</h3>
<p>{speaker_bio}</p>
</div>
</div>
</div>
</div>
</section> {!-- /End Speakers --}
Javascript codes
$('.speaker-container').each(function(){
var containerHeight = $(this).height();
$('.speaker-info').css({ 'top' : containerHeight});
});
$('#speakers .span3').on('click', function(){
var containerHeight = $(this).parent('.speaker-container').height();
var h = $(this).next('.speaker-info').height();
var totalHeight = containerHeight + h;
$(this).find('.speaker-img').children().toggleClass('hover');
$('#speakers .span3').not($(this).next('.speaker-info')).next('.speaker-info').removeClass('fade');
if (!$('.speaker-info').hasClass('fade') && !$('.speaker-container').hasClass('open')) {
$(this).closest('.speaker-container').css({'height' : totalHeight}).addClass('open');
$(this).next('.speaker-info').addClass('fade');
} else {
$('.speaker-container').css({'height' : h}).removeClass('open');
$(this).next('.speaker-info').toggleClass('fade');
$('.speaker-info').removeClass('fade');
}
});
$('.close-speaker').on('click', function() {
var container = $(this).closest('.speaker-info').height();
$(this).closest('.speaker-container').css({'height' : container}).removeClass('open');
$('.speaker-info').removeClass('fade');
});
I suggest you can use JQuery for that feature you want to do. Here's the link for your reference: JQuery Accordion. I hope it helps. Thanks!
Hi I'm looking to move an image tag across divs based on mouse click, I have created a tile grid system with two different types of tile - "deathsquare" & "mapsquare". The player can only spawn inside the "mapsquare" tiles and I'm trying to use this for the moment too.
Grid -
<div id="28_25" class="deathsquare"></div>
<div id="29_25" class="deathsquare"></div>
<div id="30_25" class="deathsquare"></div>
<div id="1_20" class="mapsquare"></div>
<div id="2_20" class="mapsquare"></div>
<div id="3_20" class="mapsquare"></div>
<div id="4_20" class="mapsquare"></div>
This is the JSFiddle http://jsfiddle.net/zCZkA/16/
I can't seem to move the player up the "mapsquare" classes using the onclick arrow. Anyone have any suggestions?
Thanks!
You'll probably want to ensure that your rendered squares are systematically placed in order. Your squares currently are not. After you have sorted out that issue you can keep track of where your player is like so...
$('#up').click(function(){
var player = $('#player');
var currentDiv = player.parent().attr('id'); // gets you 3_5 or something like that
player.remove();
//do logic to move up
var placement = currentDiv.split('_');
var newSquare = [parseInt(placement[0])++,placement[1]].join('_');
$('#' + newSquare).append(player);
});
Im pretty new to web programming and im working on a site now. In one part of this site, I have collections of 3 pictures. 1 larger one and two smaller thumbnails below it. The goal is to create a way in which i can click on one of the thumbnails and they swap spots with the one large picture. any idea how I would go about doing this? Heres a snippet of code. Thanks!
<div class = 'picture-container'>
<div class = 'large-picture' id = 'lp1'>
<figure style = 'float:left;width:45%;'>
<img src = 'close_table_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
<figcaption class = 'red-cap'>Our Set-Up</figcaption>
</figure>
<div class = 'picture-content'>
<div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
<div class = 'picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
<!--<div class = 'small-picture'>
<img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
</div>
<div class = 'small-picture'>
<img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
</div>-->
</div>
<div class = 'thumbnail-container'>
<figure class = 'thumbnail'>
<img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
</figure>
<figure class = 'thumbnail'>
<img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
</figure>
</div>
</div>
</div>
There are many ways to solve this problem. The easiest way is to dump all your images (large and small) and only show one at a time.
So in the source code all your large images except the first one will have a class of hidden, which makes them display: none. And then it's just a matter of showing the right large image when the thumbnail is clicked.
To show the right large image you need to associate the thumbnails with the large image by an identifier. Below is an example of setting the href of a thumbnail link to the large image id.
<a href="#lp1">
<figure class="thumbnail">...</figure>
</a>
Now you add the javascript (jQuery).
// preselect all large images
var largeImages = $('figure.large');
// add handler for thumbnail clicks
$('.thumbnail-container').on('click', 'a', function (e) {
e.preventDefault();
var thumbnailLink = $(this),
selectedLarge = $(thumbnailLink.attr('href'));
// hide all the large images
largeImages.addClass('hidden');
// show the large image that corresponds to the clicked thumbnail
selectedLarge .removeClass('hidden');
});
So, the easies way is hide/show, but this means is not the most efficient. It makes the client load all the images even if they are hidden.
A more efficient approach is to add data- attributes in the thumbnails and inside the thumbnail click handler update the large content area with the data from the clicked thumbnail.To "replace" the image you just need to replace src attribute.