i have a plugin which shows me Images in a 360 3D-View.
If i open the Webpage, in the Background are loading 36 Pictures and after loading the Pictures the Plugin take one Picture and show it.
So, my Problem is that i can do some other actions on the page before all pictures are loaded and i load some other data after i click on a button with ajax and if i do other actions BEFORE all Pictures are loaded, i get duplicate entries in the HTML Code and some pictures are shown and other not something like this (this code generate the 3D Plugin).
<div>
<div rel="0" style="position: absolute; width: 100%; height: 100%; display: none;">
<img src="img0.png" class="3dweb">
</div>
<div rel="1">
<img src="img1.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="2" style="position: absolute; width: 100%; height: 100%; display: none;">
<img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="3" style="position: absolute; width: 100%; height: 100%; display: none;">
<img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="1" style="position: absolute; width: 100%; height: 100%; display: none;">
<img src="img1.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="3" style="position: absolute; width: 100%; height: 100%; display: block;">
<img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="3" style="position: absolute; width: 100%; height: 100%; display: block;">
<img src="img3.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
<div rel="0" style="position: absolute; width: 100%; height: 100%; display: block;">
<img src="img0.png" style="position: relative; width: 100%; height: auto;" class="3dweb">
</div>
my solution was that after all images are loaded, i delete the duplicate entries and show only one picture.
the problem is that my javascript/jquery code freeze the browser and i don't know why, perhaps i think it gives a better solution but i havent a better solution.
my javascript/jquery code
var myVar = setInterval(function(){ myTimer() }, 4000);
function myTimer() {
if($('[rel=35]').length > 0) {
$('.js-loading-car-image').css("display","none");
var x = 1;
var i = 0;
while (i < 35) {
var tmp = $('[rel='+i+']').next();
if($(tmp).attr("rel") == x) {
x++;
i++;
} else {
$('[rel='+i+']').next().remove();
}
}
for(var i=0; i<36;i++) {
var display = $('[rel='+i+']').css("display");
if(display=="block") {
$('[rel='+i+']').css("display", "none");
}
}
$('[rel=26]').css("display","block");
$('.js-3d-images').fadeIn("slow");
myStopFunction();
}
}
function myStopFunction() {
clearInterval(myVar);
}
Anybody ideas why the Browers are freezing or which i could/should do better?
I removed some values from your code and create a basic structure. Check whether this is the solution you are looking for
var dataset = $('#image-data > div');
var rel = [];
for(var j = 0 ; j < dataset.length; j++ ){
var x = $(dataset[j]).attr('rel');
if( jQuery.inArray(x, rel) >= 0){
$(dataset[j]).remove();
}
rel.push(x);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-data">
<div rel="0">
<img src="img0.png" alt="rel 0">
</div>
<div rel="1">
<img src="img1.png" alt="rel 1">
</div>
<div rel="2">
<img src="img2.png" alt="rel 2">
</div>
<div rel="3">
<img src="img3.png" alt="rel 3">
</div>
<div rel="1">
<img src="img1.png" alt="rel 1">
</div>
<div rel="3">
<img src="img3.png" alt="rel 3">
</div>
<div rel="3">
<img src="img3.png" alt="rel 3">
</div>
<div rel="0">
<img src="img0.png" alt="rel 0">
</div>
</div>
Related
I'm building an app using jquery mobile.
I want to vertically and horizontally center multiple images using grid, i want the images to be exactly in the center of the page. I'v tried everything but nothing really worked.
I want it exactly to look like whats in this pic:
Sample
and here is my code:
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
</div>
</div>
I would love if it can look exactly like the image attached.
Thank you.
You can scale the content div to take the device height:
$(document).on( "pagecontainershow", function(){
ScaleContentToDevice();
$(window).on("resize orientationchange", function(){
ScaleContentToDevice();
})
});
function ScaleContentToDevice(){
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
Then use some CSS on the grid to center everything within the scaled content:
<div id="GridWrapper">
<div class="ui-grid-a centeredGrid">
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
</div>
</div>
#GridWrapper{
position: relative;
height: 100%;
}
#GridWrapper .centeredGrid{
position: absolute;
width: 380px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
DEMO
You can try with flexbox properties.
.ui-block-a,.ui-block-b{
width: 30px;
height: 30px;
margin: 5px;
}
.ui-grid-a{
display: flex;
align-items: center;
min-height: 15em;
justify-content: center;
}
For further information about flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am trying to use jQuery-UI draggable which is working fine, but I have a strange behavior. When I am setting a containment, the draggable div jumps from one side to another. When I am disabling it, then I can smoothly drag the container.
$('.bJS_issueTeaser').draggable({
'cursor': 'move',
axis: "x",
containment: "parent"
});
.b_ct_issueTeaser {
width: 37.665rem;
overflow: hidden;
max-width: 100%;
margin-top: 60px;
position: relative;
min-height: 250px;
}
.bJS_issueTeaser {
width: 50.0745rem;
position: absolute;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -0.67rem;
margin-right: -0.67rem;
}
.c_teaser {
width: 240px;
height: 100px;
padding-left: 0.67rem;
padding-right: 0.67rem;
}
.c_teaser-inner {
position: relative;
}
.c_description {
position: absolute;
bottom: 0;
width: 100%;
height: 2rem;
background: rgba(255, 255, 255, 0.5);
padding: 0.67rem 1.34rem;
}
.img-fluid {
display: block;
max-width: 100%;
height: auto;
}
<div class="b_ct_issueTeaser">
<div class="bJS_issueTeaser ui-draggable ui-draggable-handle">
<div class="row c_row">
<div class="c_teaser">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem ipsum
</p>
</a>
</div>
</div>
</div>
<div class="c_teaser">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem Ipsum
</p>
</a>
</div>
</div>
</div>
<div class="c_teaser c_teaser-right">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem ipsum
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
jsFiddle
I have created a Fadein/Fadeout slider. Left button and right button are working fine but I want to play slider by clicking on tab buttons.
JSfiddle
HTML
<p id="slide1_controls">
<div class="block-icon icon-s1">
<img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s2">
<img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s3">
<img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s4">
<img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
</div>
</p>
<div class="slider-text-context" id="target">
<div class="slide-01 fade-texts active">tab1</div>
<div class="slide-02 fade-texts">tab2</div>
<div class="slide-03 fade-texts">tab3</div>
<div class="slide-04 fade-texts">tab4</div>
</div>
CSS
.fade-texts {
width: 100%;
height: 259px;
left: 0px;
position: absolute;
}
.slider-btn-area {
position: absolute;
z-index: 8;
margin-left: auto;
margin-right: auto;
left: 25%;
top: 54%;
width: 50%;
}
#target > div {
display:none;
}
#target div:nth-child(1) {
display:block;
}
.tab-area {
position: absolute;
left: 25%;
top: 30%;
}
Javascript
$(".icon-s2").click(function() {
activeElem = $("#target .slide-02");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
$(".icon-s3").click(function() {
activeElem = $("#target .slide-03");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
When I press the tab it does not work to try to appear a DIV.
Your code made no sense. The way it looked was that the images had to be clicked in order to fadeIn/Out the tabs. I believe it should be the other way. I cleaned up the markup, and simplified the classes, ids, styles, etc...
Here's the DEMO
HTML
<div id="slides">
<div id="slide1" class="slide active">
<img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
</div>
<div id="slide2" class="slide">
<img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
</div>
<div id="slide3" class="slide">
<img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
</div>
<div id="slide4" class="slide">
<img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
</div>
</div>
<div class="tab-area" id="controls">
<div id="tab1" class="tab">1</div>
<div id="tab2" class="tab">2</div>
<div id="tab3" class="tab">3</div>
<div id="tab4" class="tab">4</div>
</div>
CSS
.slide {
display:none;
}
.active {
display: block;
}
.tab {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
outline: 1px solid black;
text-align: center;
cursor: pointer;
}
jQuery/JavaScript
$(function () {
$('.tab').on('click', function (event) {
var tabID = event.target.id;
//console.log('tabID: '+tabID);
var order = tabID.split('b').pop();
//console.log('order: '+order);
var pos = parseInt(order, 10);
var slideID = 'slide'+pos;
//console.log('slideID: '+slideID);
var act = document.getElementById(slideID);
//console.log('act: '+act.id);
$('.slide').fadeOut(0).removeClass('active');
$(act).addClass('active').fadeIn(750);
});
});
I need some help to make the image fit inside the DIV Tag with provided height and width and should not stretch. As a few images are Landscape and a few are Portrait, I need to force them to fit into the DIV OR IMG Tag.
<div class="frame" style="">
<img id="photo" src="http://pocketlink.epocketlife.com/ImageRepository/images/events/ADEBAB1C-4FAF-4D65-A43D-A02978B76340/7adb104b-5140-45d9-a694-56cf5112917d.png">
</div>
This is one of the Examples I found, you may implement there.
http://jsbin.com/vikanovaya/edit?html,css,output
You will need to use some CSS position trickery to achieve what you want but hopefully one of these examples will do what you want.
Example 1 - A Single Image
In the example below, the image will grow or shrink when the image hits the edge of the container. If you resize the example horizontally or vertically it will never crop. (Try the fullscreen example for instance).
Requires: CSS Only
body {
margin: 0;
padding: 0;
font-family: "Segoe UI Light", "Helvetica Neue LT", "Helvetica Ultra LT", "Roboto", Arial, sans-serif;
}
.gallery {
background: rgba(0, 0, 0, 0.9);
border-radius: 10px;
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
overflow: hidden;
z-index: 2;
}
.gallery .imageWrapper {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.gallery .imageWrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
<div class="gallery isFullScreen">
<div class="imageWrapper">
<img src="http://via.placeholder.com/3500x1500" />
</div>
</div>
Example 2 - Thumbnails
In this example there are two images that don't conform to their containers aspect ratio. They are resized so that their longest edge hits the div first and then they are centered. All thumbnail containers should now be the same size and images that do not conform shrink to fit.
Requires: CSS Only
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
overflow: hidden;
}
.galleryArea .imageWrapper {
position: relative;
width: 100px;
height: 100px;
float: left;
background: #fff;
}
.galleryArea .imagePosition {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x100" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
Example 3 - Thumbnails that Stretch
In this example, the two images that do not conform to their containers aspect ratios are now stretched so that their shortest edge expands to fill the container and their longest edge overflows. This makes the end result a little neater but requires JavaScript to help things along.
Requires: CSS and JavaScript (jQuery)
$(window).on("load", function() {
orientateGalleryImages($("#contentGallery").children().children().children("img"));
});
function orientateGalleryImages(images) {
images.each(function() {
var thisImage = jQuery(this);
if(thisImage.height() > thisImage.width()) {
thisImage.addClass("portrait");
} else if(thisImage.width() > thisImage.height()) {
thisImage.addClass("landscape");
} else {
thisImage.addClass("square");
}
});
}
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
display: flex;
}
.galleryArea .imageWrapper {
position: relative;
width: 10%;
padding-top: 10%;
overflow: hidden;
}
.galleryArea .imagePosition {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.galleryArea .imagePosition img.landscape {
max-height: 50%;
height: 50%;
left: -50%;
margin-left: 25%;
}
.galleryArea .imagePosition img.portrait {
max-width: 50%;
width: 50%;
}
.galleryArea .imagePosition img.square {
max-width: 50%;
max-height: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x100" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
I have situation where i have to delete all element(.bxwrapper) except last bxwrapper which is containing ul li from the html for this i have written jquery code which is not working properly please suggest.?
<div class="row" id="customBx">
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 336px;">
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 335px;">
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 333px;">
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 331px;">
<ul class="bxslider">
<li class="edSel edBxSlider editBxSlider edRemove" style="float: left; list-style: none; position: relative; width: 990px;"></li>
<li class="edSel edBxSlider editBxSlider edRemove" style="float: left; list-style: none; position: relative; width: 990px;"></li>
</ul>
</div>
<div class="bx-controls bx-has-controls-direction">
<div class="bx-controls-direction">
<a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.bx-wrapper:not(:last-child)').remove();
</script>
You can use detach() so try this:
var $lastChild = $('.bx-wrapper').last().detach();
$('#customBx').html($lastChild);
Or Simply
$('#customBx').html($('.bx-wrapper').last());
You should first clone it then remove them.
var list = $('ul.bxslider').clone(true, true);
$('.bx-wrapper').remove();
Then append the cloned element to body or some other element.
$('#customBx').html('<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 331px;"></div>').find('.bx-viewport').append( + list + );
You also try with this:
var $lastChildren = $('ul.bxslider').parent().parent('.bx-wrapper').html();
$('#customBx').html($lastChildren);
but use into below jquery portion
$(document).ready(function(){
// Above code
})