I m trying to display list of images in div. for it I float it in left but after floating left it leave a lot of space and not display inline. can you help
snap shot is
and my html code is
<div class="col75">
<div class="col20">
<img src="images/saari1.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari2.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari3.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari4.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari5.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari1.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari2.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari3.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari4.jpg" width="100%" />
</div>
<div class="col20">
<img src="images/saari5.jpg" width="100%" />
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
and my css code is
.col20 {
width: 17.5%;
float: left;
margin: 1%;
border: 1px solid #f5f5f5;
background: #e5e5e5;
}
.clear {
clear:both;
}
Please help me how it solve it. I want my all images just like my first row inline
you may consider using display:inline-block instead of float:left
e.g.
.col75 {
font-size:0px;
}
.col75 > div {
display:inline-block;
font-size:12px; // for expample
vertical-align: baseline !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:1% 1% 0 0; // you may consider using px instead of %
border:1px solid #f5f5f5;
background:#e5e5e5;
}
If you take a deep look you can see that not all images have same height and the problem is starting where is an image taller than the other ones :
You can check this fiddle. On .col20 i put a fixed height and overflow:hidden; and now everything is ok, but on some resolutions you could have some issues.
Another way is to use masonry, but according to this is unuseful.
If I were you, I would try to get all images on same sizes (width/height) ( from back-end, php or whatever ), or if is just some simple html, to slice all of them with same dimensions.
Related
I have simple JS code that on "text-title" element click checks if another element exists and if it does it add class to third element. Problem is that function works properly only in user clicks twice on "text-title" element. I also tried to console.log "(.fpd-layouts-panel .fpd-item).length" element and I get correct value only on second click.
What am I doing wrong?
Here is my JS code:
jQuery('.text-title').click( function() {
if (jQuery('.fpd-layouts-panel .fpd-item').length) {
jQuery('.ux-swatch[data-value="caseotic"]').removeClass('hidden');
} else {
jQuery('.ux-swatch[data-value="caseotic"]').addClass('hidden');
};
});
And HTML code:
<div class="fpd-item fpd-tooltip text-title tooltipstered selected" data-title="iPhone 12" data-source="http://localhost:8888/wp-testi/wp-content/uploads/2021/10/iphone-13.jpg">iPhone 12 </div>
<div class="ux-swatch tooltip ux-swatch--image tooltipstered" data-value="caseotic" data-name="CASEOTIC"><img width="100" height="100" src="http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13-100x100.jpg" class="ux-swatch__img attachment-woocommerce_gallery_thumbnail size-woocommerce_gallery_thumbnail" alt="CASEOTIC" loading="lazy" srcset="http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13-100x100.jpg 100w, http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13-510x510.jpg 510w, http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13.jpg 650w" sizes="(max-width: 100px) 100vw, 100px"><span class="ux-swatch__text">CASEOTIC</span></div>
<div class="fpd-layouts-panel">
<div class="fpd-scroll-area mCustomScrollbar _mCS_6 mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible;"><div id="mCSB_6" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_outside" tabindex="0" style="max-height: none;"><div id="mCSB_6_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr">
<div class="fpd-grid"><div class="fpd-item fpd-tooltip tooltipstered"><picture style="background-image: url(http://localhost:8888/wp-testi/wp-content/uploads/2022/01/CASEOTIC-IPHONE-13.jpg" );"=""></picture></div></div>
</div></div><div id="mCSB_6_scrollbar_vertical" class="mCSB_scrollTools mCSB_6_scrollbar mCS-light mCSB_scrollTools_vertical mCSB_scrollTools_onDrag_expand" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_6_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; height: 0px; top: 0px;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div><div class="mCSB_draggerRail"></div></div></div></div></div>
</div>
And in advance thank you all for helping.
Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side.
Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.
Here is my code:
HTML
<section class="product-page">
<div class="thumbnails">
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></div>
</div>
<div class="img-display">
<span class='zoom' id='shoe1'>
<img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
</span>
<span class='zoom1' id='shoe1'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
</span>
<span class='zoom' id='shoe3'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
</span>
<span class='zoom' id='shoe4'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
</span>
<span class='zoom' id='shoe5'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
</span>
</div>
</section>
JS for image changing while clicking on the thumbnail images
var img = document.getElementById("img-area");
function right(){
img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
}
function left(){
img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
}
function bottom(){
img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
}
function pairSide(){
img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
}
function pairTop(){
img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
}
And the Jquery code
$(document).ready(function(){
$('#shoe1').zoom();
$('#shoe2').zoom();
$('#shoe3').zoom();
$('#shoe4').zoom();
$('#shoe5').zoom();
});
How to make the changed image zoom in on hover?
Thanks in advance.
Something as simple as this could be achievable without causing repetitive strain injury.
For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.
Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).
Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.
Images courtesy of JD Sports.
$(function() {
$('.zoom').zoom();
$('.thumb').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
img {
display: block;
height: auto;
max-width: 100%;
}
.product-page {
display: flex;
}
.img-display {
flex-grow: 1;
max-width: 372px;
}
.thumb {
opacity: .7;
margin: 0 .25rem .25rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.thumb:hover,
.thumb.active {
opacity: 1;
}
.zoom {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<section class="product-page">
<div class="thumbnails">
<div class="thumb active">
<a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="img-display">
<span class="zoom">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
</span>
</div>
</section>
#perocvrc
Please try below code it works perfectly as per your requirement.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
height: auto;
max-width: 100%;
}
.main-view-page {
display: flex;
}
.full-screen-img {
flex-grow: 1;
max-width: 500px;
}
.sideimg {
opacity: .7;
margin: 0 .1rem .1rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.sideimg:hover,
.sideimg.active {
opacity: 1;
width:135px;
}
.zoom-in {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(function() {
$('.zoom-in').zoom();
$('.sideimg').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom-in')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
</script>
</head>
<body>
<section class="main-view-page">
<div class="thumbnails">
<div class="sideimg">
<a href="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
<img src="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
</a>
</div>
<div class="sideimg active">
<a href="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
</a>
</div>
<div class="sideimg">
<a href="https://jooinn.com/images/cabin-with-beautiful-view.jpg">
<img src="https://jooinn.com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
<div class="sideimg">
<a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
<img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="full-screen-img">
<span class="zoom-in">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images">
</span>
</div>
</section>
</body>
</html>
I hope above code will be useful for you.
Thank you.
I'm working on a mobile app using jquery and need the user to be able to touch and hold on one div, then slide over to another div. I can't figure out how to make the second div register that the touch is now over it.
So for example when someone touches and holds div 4 and then slides into div 1, 3, 5 or 7 I want to be able to know which div they slid into and change things about that div.
here's a fiddle of what I have so far:
https://jsfiddle.net/hedonicmania/wuqa7a9y/4/
here's the code of what I have so far:
html:
<div class="game-container">
<div class="game-square" id="0" ></div>
<div class="game-square" id="1" ></div>
<div class="game-square" id="2" ></div>
<div class="game-square" id="3" ></div>
<div class="game-square" id="4" ></div>
<div class="game-square" id="5" ></div>
<div class="game-square" id="6" ></div>
<div class="game-square" id="7" ></div>
<div class="game-square" id="8" ></div>
</div>
css:
.game-container {
width:300px;
height:300px;
}
.game-square {
width:100px;
height:100px;
float:left;
/* inside border */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px solid #222;
position: relative;
}
js:
var divs = $('.game-square');
$('.game-square').bind('touchstart', function(){
var thisDiv = document.getElementById($(this).attr('id'));
thisDiv.style.backgroundColor = '#FFB395';
});
$('.game-square').bind('touchend', function(){
var thisDiv = document.getElementById($(this).attr('id'));
thisDiv.style.backgroundColor = '#ADE8AF';
});
Thanks for the help.
You can do it by using flag on to check if the user is sliding the game-square. You can see the implementation on JSFiddle
I have two div tags in my html code as shown below. I want to change their float property depending on page UI culture ( Ui culture is en-US or fa-IR) ... I think I can use java script to do so. but I don't know how can I get the UI Culture through Javascript. I want a code in if condition to determine the Ui culture ... thx in advance for your help...
<div id="zone1" style="float: left;"><img alt="" src="~/IconArrow.png" /> </div>
<div id="zone2" style="float: left;"><img alt="" src="~/IconHome.png" /></div>
<script type="text/javascript">
if(/* ui culture is fa-IR*/)
{
document.getElementById("zone1").style.float = "right";
document.getElementById("zone2").style.float = "right";
}
</script>
Hello try this and let me know. if this solves your problem please don't forget to select correct answer
<script type="text/javascript">
function testfunc(g)
{
//alert("asd"+g);
if(g == "fa-IR")
{
alert("as");
obj = document.getElementById("zone1");
obj2 =document.getElementById("zone2");
obj.setAttribute("style", obj.getAttribute("style") + "; float:right; ");
obj2.setAttribute("style", obj2.getAttribute("style") + "; float:right; ");
}
}
</script>
=================================================================================
<div style="display:block; width:100%; height:100px; border:1px solid #333">
<div id="zone1" style=" float: left; display:block; width:20px; height:20px; background:#93F;"> </div>
<div id="zone2" style=" float: left; display:block; width:20px; height:20px; background:#F66;"> </div>
</div>
<input type="button" name="" onclick = "testfunc('fa-IR')" value="test" />
I want to remove the script which i wrote that nakes the use of the class i.e. UiUx3DSSVFlow. Without hardcoding this internal class, how to make use of their parent #thumbs?
I should not any more make use of the specific classes in my script. In the future those classes could change to any other class name. I need the same functionality in another way without using the internal class names
HTML:
<!--Thumbs Image-->
<div id="thumbs">
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div class="UiUx3DSSVFlow">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
<div id="Video" class="UiUx3DSSVFlow">
<div class="video_gallery">
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{
border:1px solid red;
width:100%;
}
#thumbs div{display:inline-block; }
#larger{
border:1px solid black;
width:100%;
}
#larger div{display:inline-block; }
jQuery:
function thumbs(i,incr){
var num_thumbs=2;
if(i===null){
i=$("#thumbs").prop('data-index'),
i+=num_thumbs*incr;
}
i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
$("#thumbs").prop('data-index',i);
$('#thumbs .UiUx3DSSVFlow').hide();
$('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}
$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
var that=this;
$('.t'+that[0]).click(function(){
thumbs(null,that[1]);
});
});
$('.tprev').click();
http://jsfiddle.net/T657N/33/
jsFiddle demo
review your HTML, CSS knowledge before jumping into JS!
You cannot have multiple ID inside one document!
A div element (as it's by default a block element) does not need the width:100%;
display: inline-block is best suitable and xbrowser for <span> elements, for other browsers you'll need to use some sort of hax like:
display:inline-block;
*display:inline;
zoom:1;
HTML:
<div id="thumbs">
<div>
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
<img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
</div>
<div>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
<iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
</div>
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>
CSS:
#thumbs{border:1px solid red;}
#thumbs div{display:inline;}
jQuery:
var $tDiv = $('#thumbs div');
var tDivsN = $tDiv.length;
var c = 0;
function display(){
c= c===-1? tDivsN-1 : c%tDivsN;
$tDiv.hide().eq(c).show();
}
display();
$('.tprev, .tnext').on('click',function(e){
e.preventDefault();
var myCLass= $(this).hasClass('tnext') ? c++ : c--;
display();
});