I am trying to build a masonry page with some images. here is my code
CSS
<style>
.masonryImage{float:left;}
</style>
JavaScript
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--<script src="<?=base_url('assets/js/bootstrap.min.js')?>"></script>-->
<script src="<?=base_url('masonry/masonry.min.js')?>"></script>
<script src="<?=base_url('masonry/masonry.js')?>"></script>
<script type="text/javascript">
var container = $('#container');
container.imagesLoaded( function(){
container.masonry({
itemSelector : '.masonryImage'
});
});
</script>
HTML
<body id="container" style="height:100%;width:100%;background-color:#309be9;">
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Playing-fetch.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Polar-bear.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-precious.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-baby-penguin.....jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-And-just-because-well-just-because-we-CAN.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Bunnies-and-flowers...jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-captionme.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Its-mum-is-called-Alinga..jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Curious-bobcat-cub-by-Megan-Lorenz.jpg" alt="">
</div>
</body>
I dint understand where the bug is, the page is not rendering in mansory style.
please suggest.
UPDATE:
After trying the two suggested javascripts the images started overlapping . Actually the code itself is not responsible for this. But something is going wrong with masonry. here is the screen shot
If you notice clearly i highlighted with a red mark, it shows some of the images and hiding!!
Ahh this is playing with me
If i try inspect element, the images are returning to their position
Too puzzeled
I don't see an initialization of Masonny in your code:
$(document).ready(function (){
var $container = $('#container');
$container.masonry({
columnWidth: 200,
itemSelector: '.masonryImage'
});
})
Check if your js is properly called.
Either use masonry.min.js or masonry.js it's good to use masonry.min.js if your are deploying.
To check if your js is called properly, view source and open the js link or place a simple alert inside your js.
EDIT: You seem to use imagesloaded which is not part of mansory, but can be used with mansory. If you want to initiate masonry, you have to replace your code with
$( document ).ready(function() {
$('#container').masonry({
columnWidth: 200,
itemSelector: '.item'
});
});
or with your current code you have to add imagesloaded.js
Related
I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>
I wrote a simple code where I'm trying to load a background-color to a div when page loads. Here is the code:
<div id="offerOne">
<img src="images/images.jpg" class="img-responsive center-block" alt="img">
</div>
Javascript:
<script type="text/javascript">
$('#offerOne').attr('style', 'background-color: #f12 !important');
</script>
But this isn't loading background-color for div when page loads. How can I do it?
You should put your code inside Dom ready,
$(function(){
$('#offerOne').attr('style', 'background-color: #f12 !important');
})
$('#offerOne').css('background-color', '#f12');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="offerOne">
<img src="images/images.jpg" class="img-responsive center-block" alt="img">
</div>
try
use
$(document).ready(function() {
// your code
});
I need some help please.
How do I make this work on an ipad. It needs to allow me to drag a group of images around that are each linked to a separate file when clicked. Right now the dragging is working but the image links are not. Now, if a comment out the initTouch();, then the image links will work.
I would like to get the links and the dragging to work together.
example:
<head>
<link rel="stylesheet" href="Page2.css" />
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>
<meta charset="utf-8">
<script>
$(function() {
$(document).ready(function (){initTouch(); });
$( "#draggable" ).draggable({ handle: "p.ui-widget-header" });
$( "#draggable" ).draggable({ cursor: "crosshair" });
$( "#draggable" ).draggable({ containment: "none" });
// these two lines of code are currently not working unless I delete first line after word function//
$( "#image2" ).wrap('');
$( "#image3" ).wrap('');
});
</script>
</head>
<body>
<div id="primaryContainer" class="primaryContainer clearfix">
<div id="box" class="clearfix">
</div>
<div id="box1" class="clearfix">
</div>
<p id="text">
<span id="effect">Commercial</span><br />
</p>
<div id="wood" class="clearfix">
<div id="draggable" class="ui-widget-content">
<p class="ui-widget-header"><img id="image" src="img/film1_01.png" class="image" /></p>
<img id="image1" src="img/film1_02.png" class="image" />
<img id="image2" src="img/film1_03.png" class="image" />
<img id="image3" src="img/film1_04.png" class="image" />
<img id="image4" src="img/film1_05.png" class="image" />
<img id="image5" src="img/film1_06.png" class="image" />
<img id="image6" src="img/film1_07.png" class="image" />
</div></div>
<p id="text1">
<span id="textspan1">Drag a film strip and select the video you want to see.</span><br />
</p>
</div>
</body>
Since the drag-event only gets called if the element actually gets moved.
On mouseup: check if the draggable drag event was invoked, and if not, do click action.
var dragInvoked=false;
$( "#draggable" ).draggable({
drag:function(){
dragInvoked= true;
}
});
$("#draggable").mouseup(function(){
if (!wasMoved){
doClickAction();
}
wasMoved=false;
});
You could try to attach touchstart and touchend events, and measure the time between start and end to check if it's a "tap" or if they are "dragging". Then if it's a tap you could just open the image. If it's longer than say, 500ms they are obviously dragging the image so you would make the image draggable from there.
I have a working inner-zoomable image using the code below and I would like to modify this to an image gallery with zoom of the selected image element, but cannot figure out how to begin. What I would like is for the image source in the second hyperlink below ("img_02" src=") to substitute for the first. Anyone shed any light please?
<html>
<head>
<script src="../jquery-1.8.3.min.js"></script>
<script src="../jquery.elevatezoom.js"></script>
</head>
<body>
<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<div id="zoom_01">
<a href="#" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<img id="img_01" src="../images/package_thumb.jpg" /></a>
<a href="#" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
<img id="img_02" src="../images/coffee_thumb.jpg" /></a>
</div>
<!--initiate the plugin and pass the id of the div containing gallery images-->
<script>
$('#zoom_01').elevateZoom({zoomType: "inner", cursor: "crosshair",});
</script>
</body>
</html>
1) ID should never be used more then once in a single html ~ you have used "zoom_01" 3 times use it only on the first image.
2) To create a gallery you should use this code:
$("#zoom_01").elevateZoom({gallery:'gallery', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
Here is the fixed HTML:
<img id="zoom_01" src="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<div id="gallery">
<a href="../images/package_big.jpg" data-image="../images/package.jpg" data-zoom-image="../images/package_big.jpg">
<img id="img_01" src="../images/package_thumb.jpg" /></a>
<a href="../images/coffee_big.jpg" data-image="../images/coffee.jpg" data-zoom-image="../images/coffee_big.jpg">
<img id="img_02" src="../images/coffee_thumb.jpg" /></a>
</div>
And yes the demo site HTMl code is wrong :) ~ i will send them a mail.
My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.
Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.
Here's what my code looks like :
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}</script>
</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
var slider = $('#slidersample').bxSlider({
mode:'fade',
controls: false
});
$('#bx-prev-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#hover-next-g-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#bx-next-sample').click(function(){
slider.goToNextSlide();
return false;
});
$('#hover-next-d-sample').click(function(){
slider.goToNextSlide();
return false;
});
});
});
</script>
</head>
<body>
<div id="left-menu">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br />
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br />
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a>
</div>
<div class="newboxes" id="newboxes1">DIV 1
<!-- SLIDER -->
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px">
<div class="bx-prev"><div id="bx-prev-sample">←</div></div>
<div class="bx-next"><div id="bx-next-sample">→</div></div>
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div>
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div>
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px">
<li><img src="images/1.jpg" width="580" height="375" /></li>
<li><img src="images/2.jpg" width="580" height="375" /></li>
<li><img src="images/3.jpg" width="580" height="375" /></li>
</ul>
</div>
<!-- SLIDER END-->
</div>
<div class="newboxes" id="newboxes2">DIV 2<br /></div>
<div class="newboxes" id="newboxes3">DIV 3</div>
</body>
</html>
I use
.newboxes {display:none;}
in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:block or display:none elsewhere in the code has been unsuccessful.
Can anyone think of a way to fix this? Thank you.
I had the similar problem with bxSlider plugin: when the DIV that contained it was initially hidden display:none, the slideshow would not appear when I make the DIV visible $('#div-id').show();. Only slideshow control buttons appeared. Then I solved the problem like this:
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true
});
$("#processSignUp").click(function() { // button that sets the DIV visible
$("#trainings-slide").show(); // DIV that contain SLIDER
mySlider.reloadSlider(); // Reloads the slideshow (bxSlider API function)
});
});
</script>
As you can see I reloaded the slideshow just after the DIV (that contain the slider) was showed and it worked perfectly. Maybe that can help to solve your problems and to avoid using visibility:hidden and other tricks.
I know this question was asked awhile ago but I have the same issue. I have no idea whats up with bxSlider and display:none. It doesn't seem to read the content if its contained in a div with the display set to none.
I've gotten around it thus far by toggling visibility:hidden and visibility:visible instead of display.
You can use visibility:hidden and visibility:visible, but will some troubles. And you can use height:0px;overflow:hidden;
I`m use last solve
Another solution would be to allow bxslider to load, then hide it once it has.
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true,
onSliderLoad: function() {
$('#trainings-slide').hide();
}
});
});
</script>