I need to create a simple image + text rotator. Like on the picture https://dl-web.dropbox.com/get/Public/rotator.jpg?_subject_uid=6084477&w=AADd9lfxtZZzhWbGMTKwMdWn3eVjgGZ_OplgxVycsivbHA.
It will be a small block in the body of the page. Elements should change automatically after certain time, but it should be also possible to rotate them with arrows.
I am a newbie in programming, so my apologies if this is too obvious question. I suppose I should use CSS and Javascript here?
Also I've tried to google for some code example, but everything I find looks too complicated, while I need really light and basic functionality.
Thanks for advice.
The basic idea of something like this is to have a div with position: relative and width and height of one image. Lets call it #images_holder. In this #images_holder would be another div with position: absolute, height of one image, and width of all images. Lets call this inner div #moving_part. In this #moving_part you can put your images. If you want to have images with text, create div with float: left, position: relative and width and height of one image for each image. Lets call this divs .image_holder. Inside .image_holder you can put your images and texts for example as spans with position: absolute.
With something like this you are able to move the #moving_part by setting left with javascript.
I wrote an example of this using jQuery, but it's intended just to show you the way, it's not complete solution. It has some flaws, like if you click multiple times on move_left_button while moving, it can move your images outside viewable area, as the checking if it can be moved is done as soon as you click the button and it does not consider if it is already moving. To solve this you should use for example data-moving attribute, set it to true when moving is started and to false when it's finished, and start moving only if it is set to false. It would be also good idea if the width and height were dynamicly obtained from elements instead of hardcoding it. With this code as it is you will have to put your own values for widths and heights, and calculate when moving should be allowed based on image width, count of images and current left value.
Also this would work only if you have just one slider per page. If you want to have more you have to change ids to classes, and rewrite the code so it move only moving_part of the images_holder you clicked. Something like $( ".images_holder" ).each( function(){ $this_moving_part = $( this ).find( ".moving_part" ); /* and so on... */ } );
Here is Jsfiddle: http://jsfiddle.net/5Lc7cc7u/
HTML:
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder">
<span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
CSS:
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 1440px; /* image_width * number_of_images */
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
Javascript:
$( "#move_left_button" ).click( function() {
move_left();
} );
$( "#move_right_button" ).click( function() {
move_right();
} );
function move_left() {
if( get_acct_left() >= -480 ) {
$( "#moving_part" ).animate( {
left: "-=480px"
}, 1000, function() {
if( get_acct_left() <= -480 * 2 ) {
$( "#moving_part" ).attr( "data-direction", "to_right" );
}
} );
}
}
function move_right() {
if( get_acct_left() < 0 ) {
$( "#moving_part" ).animate( {
left: "+=480px"
}, 1000, function() {
if( get_acct_left() >= 0 ) {
$( "#moving_part" ).attr( "data-direction", "to_left" );
}
} );
}
}
function get_acct_left() {
return parseInt( $( "#moving_part" ).css( "left" ) );
}
function move_to_next() {
if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
move_left();
} else {
move_right();
}
}
setInterval( move_to_next, 4000 );
Related
I am trying to work with html2canvas to create an image out of a div
Brief:
I have an image (png) with a transparent area in it
I have another image (can be jpg or png) that will be dragged/resized
to look good inside the transparent area of the above image using a
helper div
I have the helper div that will have highest z-index with draggable
and resizable
After user is happy he can click "done editing" to create a canvas with end result showing all images
<div id="container">
<div id="artwork">
<img src="http://preview.ibb.co/gsvuPR/photo1.png" alt="photo1" border="0">
</div>
<div id="img">
<img src="http://puckerupbuttercup.files.wordpress.com/2016/02/0092-happy-alone.jpg"/>
</div>
<div id = "dragger">
</div>
</div>
<a href="#d" id="done">
done editing
</a>
body {
padding: 0;
margin: 0
}
#container {
background: #ccc;
height: 400px;
width: 600px
}
#artwork {
width: 100%;
z-index: 2;
position: absolute;
}
#artwork img {
height: 400px;
width: 600px
}
#img {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
z-index: 1;
}
#img img {
position: relative
}
#dragger {
border: dashed 3px grey;
z-index: 3;
cursor: all-scroll
}
#done {
position: absolute;
right: 0;
top: 0;
z-index: 444;
padding; 5px;
background: yellow
}
$("#img img").css("max-width",$("#artwork img").width());
$("#img img").css("max-height",$("#artwork img").height());
$("#dragger").css("max-width",$("#artwork img").width()-5);
$("#dragger").css("max-height",$("#artwork img").height()-5);
var img_h = $("#img img").height()-5;
var img_w = $("#img img").width()-5;
var right = $("#artwork img").width()-img_w-5;
var bottom = $("#artwork img").height()-img_h-5;
$("#dragger").width(img_w);
$("#dragger").height(img_h);
$("#dragger").draggable({
axis: 'xy',
containment : [0,0,right,bottom],
drag: function( event, ui ) {
$("#img img").css('top', ui.offset.top +'px');
$("#img img").css('left', ui.offset.left +'px');
}
});
$("#dragger").resizable({
containment: "parent"
});
$( "#dragger" ).on( "resize", function( event, ui ) {
$("#img img").css('width', ui.size.width +5+'px');
$("#img img").css('height', ui.size.height +5+'px');
var img_h = $("#img img").height()-5;
var img_w = $("#img img").width()-5;
var right = $("#artwork img").width()-img_w-5;
var bottom = $("#artwork img").height()-img_h-5;
$("#dragger").draggable({
axis: 'xy',
containment : [0,0,right,bottom],
drag: function( event, ui ) {
$("#img img").css('top', ui.offset.top +'px');
$("#img img").css('left', ui.offset.left +'px');
}
});
});
$("#done").on("click",function(){
$("#dragger").toggle();
html2canvas($("#container"), {
allowTaint: true,
logging: true,
onrendered: function (canvas) {
document.body.appendChild(canvas);
}
});
});
All javascript is on ready
Everything work good in terms of resizing/dragging but html2canvas is not doing its job to display the images in a canvas for user to save
Here is a fiddle https://jsfiddle.net/p3vzgbzo/5/
I have tried this code locally with the images on same path to the page with no luck
I tried the DataToURL as well and didn't return any image
Ultimately I would like the rendered image to be uploaded to the server if possible as well
I am thinking the image needs to be converted to base code?
Thank you
Either the images in the #container must come from the same origin as the page, or you will have to embed them via base64.
Working JSFiddle with base64 images
This solution also will help someone. Elements with the absolute position are not rendering by default. Make sure all your elements are not absolute in position.
I was searching for a tutorial or code that will help to show data with image in a box "instead of new window" or "instead of same window" .
Hyper link will open the page in a box or frame but parent html will be remain in background, when the box will be closed the parent window of HTML will be shown again instead of reloading.
I do not know what is called this process and I have searched for tutorials but failed to find as I wanted.
I want to do something like this link http://photoswipe.com/ shows when image is clicked.
I am new and help please.
Thank you.
It's called a modal or overlay. When used for images it's often called a lightbox.
Here is a rough demo using jQuery. Basically you have an element that contains thumbnails of your images. Those elements have a data- attribute that points to a larger sized image. When the user clicks a thumbnail you use JavaScript to read the value of the data- attribute, create an image element and insert it into the modal/overlay. The modal/overlay will be a positioned element using fixed or absolute positioning. When the user closes the modal the container element for the image is emptied so you do not have two images in the modal the next time an image is clicked and the modal/overlay is opened.
var $overlay = $( '.photo-box-overlay' );
var $overlayIMG = $( '.photo-box-img' );
$( '.photo-box' ).on( 'click', 'img', function ( e ) {
var $target = $( e.target );
var $img = $( '<img/>', {
src: $target.attr( 'data-large' )
} );
$overlayIMG.append( $img );
$overlay.css( 'display', 'block' );
} );
$( '.photo-box-close' ).on( 'click', function ( e ) {
$overlay.css( 'display', 'none' );
$overlayIMG.empty();
} );
.photo-box-overlay {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
padding: 2rem;
background-color: rgba( 0, 0, 0, 0.8 );
}
.photo-box-close {
position: absolute;
top: 10px;
right: 10px;
height: 30px;
width: 30px;
font-size: 30px;
line-height: 30px;
color: #f1f1f1;
cursor: pointer;
}
.photo-box-overlay img {
max-width: 100%;
display: block;
height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="photo-box">
<img src="https://unsplash.it/300/150?image=85" data-large="https://unsplash.it/900/450?image=85">
<img src="https://unsplash.it/300/150?image=100" data-large="https://unsplash.it/900/450?image=100">
<img src="https://unsplash.it/300/150?image=125" data-large="https://unsplash.it/900/450?image=125">
</div>
<div class="photo-box-overlay">
<div class="photo-box-close">×</div>
<div class="photo-box-img"></div>
</div>
This is a quick demo aimed at illustrating what is required to create the functionality you're looking for. It most likely is not production ready and can/should be improved upon.
I'm changing my answer sorry. As you want to dynamicly show the picture, you are goin to create data- attr to element that includes links and then do jquery do put them into the box as you suggesting. Here is the link of DEMO
I have a problem with the pre-loader. I was trying to set it up as once per session. It works first time, but when you refresh the website the pre-loader does not stop at all and it is impossible to see the content of the website until the moment I will delete the data from the session storage. Adding visibility: invisible in to stylesheet does not work at all.
canvas {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
z-index: 99;
}
<canvas id="c"><img id="logo" width="1280" height="1024" alt="logo"></canvas>
<div>
content
</div>
if (sessionStorage.getItem('dontLoad') == null){
jQuery("#c").delay(1000).fadeOut('slow', function(){
jQuery( "body" ).animate({
visibility: visible
}, 1000);
});
sessionStorage.setItem('dontLoad', 'true');
}
The problem is that you need to change the CSS. I will try to explain.
In your CSS, you have set the canvas to display: none. In your jQuery, you try to use the fadeOut animation. This won't work because the element is not displayed, it is basically removed from the document, so jQuery can't change it.
What you need to do is set the canvas to display: block. So that the 'preloader' is visible when the user accesses the website. Then the 'preloader' will fade out.
Here is the updated CSS.
canvas {
display: block;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #000000;
z-index: 99;
}
JavaScript
if (sessionStorage.getItem('dontLoad') == null)
{
jQuery("#c").delay(1000).fadeOut('slow', function()
{
jQuery( "body" ).animate({
visibility: visible
})
}, 1000);
}
if (sessionStorage.getItem('dontLoad') == true)
{
$('#c').css('display', 'none');
}
I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}
I am creating a horizontal menu bar with a series of links. Underneath the current page link, there is an absolutely positioned div with a fixed size and a black background. When any of the other links are hovered over, this "selection indicator" slides across to underneath the hovered link. I have managed to create this effect as desired.
However, I am having an issue with the position of the "selector" div when the page first loads. For some reason the div sets it's initial position to exactly 5 pixels left of where it is supposed to be (underneath the current page link). I am using the same code to initialise the div as I am for the animation itself, and the bug only appears when the page is loaded. As soon as a link is hovered over, the "selector" slides into the correct positions until the page is refreshed/reloaded.
A working example of the menu (and the bug) can be found at www.jamiedavies.me
Here is the html structure of my navigation bar:
<header>
<h1>Main Title</h1>
<nav id="mainNav">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
<div id="pageSelector"></div>
</header>
Here is the related CSS:
nav#mainNav {
position: absolute;
right: 0px;
top: 63px;
}
nav#mainNav ul li {
display: inline;
list-style-type: none;
margin-left: 35px;
}
div#pageSelector {
height: 5px;
left: -999px;
position: absolute;
top: 91px;
visibility: hidden;
width: 25px;
}
And here is the javascript/jquery code that is responsible for animating the selector:
$( document ).ready( function() {
var offset = $( "header" ).offset().left;
$( "#pageSelector" ).css( "visibility", "visible" );
$( "#mainNav li" ).find( "a" ).each( function( i ) {
$( this ).mouseover( function( e ) {
var l = $( this ).offset().left - offset;
var w = $( this ).width();
$( "#pageSelector" ).animate( {
left: l,
width: w
}, 175, "swing" );
} );
} );
$( "#mainNav" ).mouseleave( function( e ) {
$( "#pageSelector" ).animate( {
left: $( "#mainNav li a.current" ).offset().left - offset,
width: $( "#mainNav li a.current" ).width()
}, 175, "swing" );
} );
$( "#mainNav" ).mouseleave();
} );
Try using
$(window).bind("load", function() {
instead of
$( document ).ready( function() {
Because, it seems the animation script completed execution before the other elements are supposedly loaded first, such as your special fonts and graphics, which most probably caused a mathematical error in alignment computation.
Hope this solves your problem.