Hey everyone! I have a problem with this plugin. I have no idea what is wrong here... All I did was the same as in the examples.
HTML
<div id="parallax">
<div style="width: 830px; height: 280px;">
<img style="position:absolute; top:0px; left:350px;" alt="" src="images/smile1.png"/>
</div>
<div style="width: 800px; height: 250px;">
<img style="position:absolute; top:200px; left:0px;" alt="" src="images/smile1.png"/>
</div>
<div style="width: 1000px; height: 260px;">
<img style="position:absolute; top:100px; left:150px;" alt="" src="images/smile1.png"/>
</div>
</div>
CSS
#parallax {
background:#ccc;
position:absolute;
overflow:hidden;
width:700px;
height:300px;
}
JS
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({});
});
</script>
and nothing happened... pictures are standing without any movements... any ideas?
Unfortunately his site has not been updated for a while, you can get version 1.0 from his GitHub repo which works with jQuery v1.7 (latest version at the time of writing).
https://github.com/stephband/jparallaxjParallax github
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 using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}
I am trying to use CSS to center the ASlider Jquery plugin (http://varunnaik.github.io/A-Slider/) which I have embedded into the HTML code for my website. For the life of me I can't figure out how to do it!
It seems adamant that it wants to stay on the left side of my page. I have tried using the float and display CSS elements; neither of them did anything. I even tried using margin and padding, and still nothing happened. Hell, I was desperate enough to see if text-align: center; would work but that didn't do anything either.
Here is the script in CSS and HTML to include the ASlider:
.aslider {
margin: auto;
float: center;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="images/pic1.jpg" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="images/pic2.jpg" width="550px" height="300px">
</div>
</div>
<!--</div>-->
float: center; is not valid so you can remove it from .aslider. All you need to do is add a width to .aslider so that margin: auto; takes effect.
.aslider {
margin: auto;
width: 550px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
</div>
<!--</div>-->
Normally you can do it like this:
.wrapper{
width: 100%;
border: solid;
}
.center{
border: solid red;
width: 100px;
margin-left: auto;
margin-right: auto;
}
<div class="wrapper">
<div class="center">
This needs to be centered
</div>
</div>
Add your image width to your .aslide class
.aslider{
margin:0 auto;
}
.aslide{
width:550px;
margin:0 auto;
}
<---------------------------EDIT--------------------------->
Better yet use this:
.aslider{
width:100%;
text-align:center;
margin:0 auto;
}
Sorry but I am starting with this and I would need to add some code that the mouse movement follow these gif files, for it, Could anybody help me?
<html>
<head>
</head>
<body>
<img style="position:relative; TOP:400px; LEFT:600px; WIDTH:150px;
HEIGHT:120px; margin-right:-50px" border="0" src="trail6.gif">
<img style="position:relative; TOP:330px; LEFT:465px; WIDTH:70px;
HEIGHT:70px; margin-right:-50px" border="0" src="trail4.gif">
<img style="position:relative; TOP:340px; LEFT:600px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail2.gif">
<img style="position:relative; TOP:450px; LEFT:400px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail3.gif">
<img style="position:relative; TOP:450px; LEFT:550px; WIDTH:80px;
HEIGHT:80px; margin-right:-50px" border="0" src="trail5.gif">
</body>
</html>
Could anybody help me?
thanks in advance
Alejandro Castan
Use the MouseOver function of JavaScript.
Ready-to-use examples are to be found on the W3 site.
http://www.w3schools.com/jsref/event_onmouseover.asp
I am working on a simple image gallery page that contains a main image that is swapped whenever a thumbnail image is clicked. I know that the way I am doing it would be far easier in JQuery but I am determined to get a good grip on JS before I progress to JQuery!
Here is the problem:
I want to keep the main image at 1000px wide with overflow-x only (done already) now when a thumbnail image is clicked all that changes is the main image. I think I am close with the JS code and that it just needs a bit of tweeking by someone who understands what I have done wrong here! All I am trying to do is getElementById (the URL) and swap it!
I do not know how to upload images to JS fiddle so my example is image less but all code is there and working fine with images locally.
http://jsfiddle.net/Margate/zJjys/
Code is as follows:
//Thank you in advance for any help
<html>
<head>
<title>Confused!</title>
<style type="text/css">
#main-image-container{width: 1000px; height: 350px; position: absolute; top: 172px; left: 0px; border: 1px solid black; overflow-x: auto; overflow-y: hidden;}
#graffiti-panorama-image-bar{width: 600px; height: 95px; position: absolute; top: 540px; left: 200px; border: 1px solid black; overflow: auto; background-color: white;}
.image{position: absolute; cursor: pointer;}
#center-page{border:1px solid red; width: 1005px; height: 700px; position: absolute; margin: 0px auto;}
<body>
<div id="center-page">
<div id="main-image-container">
<img id="image" src="image-01.jpg" />
</div>
<div id="graffiti-panorama-image-bar">
<img src="small-01.jpg" onclick="Main1()" class="image" style=" left: 0px;" />
<img src="small-02.jpg" onclick="Main2()" class="image" style=" left: 307px;" />
<img src="small-03.jpg" onclick="Main3()" class="image" style=" left: 626px;" />
<img src="small-04.jpg" onclick="Main4()" class="image" style=" left: 941px;" />
<img src="small-05.jpg" onclick="Main5()" class="image" style=" left: 1260px;" />
</div>
</div>
<script type="text/javascript">
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}
</script>
</body>
</html>
Try changing:
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}
To:
function Main1(){var obj=document.getElementById("image"); obj.src="image-01.jpg";}
function Main2(){var obj=document.getElementById("image"); obj.src="image-02.jpg";}
function Main3(){var obj=document.getElementById("image"); obj.src="image-03.jpg";}
function Main4(){var obj=document.getElementById("image"); obj.src="image-04.jpg";}
function Main5(){var obj=document.getElementById("image"); obj.src="image-05.jpg";}
The .src property is a property of the image itself, not its style collection.
You can also consolidate these functions into a single function, and pass the image URL as a parameter:
function Main(imageUrl)
{
var obj=document.getElementById("image");
obj.src=imageUrl;
}
Then call it with:
<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />
To follow up lan's comment:
<div id="main-image-container">
<img id="image" src="image-01.jpg" />
</div>
<div id="graffiti-panorama-image-bar">
<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />
<img src="small-02.jpg" onclick="Main('image-02.jpg')" class="image" style=" left: 307px;" />
<img src="small-03.jpg" onclick="Main('image-03.jpg')" class="image" style=" left: 626px;" />
<img src="small-04.jpg" onclick="Main('image-04.jpg')" class="image" style=" left: 941px;" />
<img src="small-05.jpg" onclick="Main('image-05.jpg')" class="image" style=" left: 1260px;" />
</div>
</div>
<script type="text/javascript">
function Main(image) {
document.getElementById("image").src=image;
}
</script>
</body>
</html>