I have used this script and I was wondering if it's possible to prevent the dragging of image when it is at the edge of the div window inside html?
Here is the link:
<https://jsfiddle.net/61t6nn4a/2/>
Any tips would be awesome thank you.
You can make your life easier by using jQuery.
jQueryUI has a draggable functionnality, check the documentation here : http://api.jqueryui.com/draggable/
HTML:
<div class="container">
<img src="http://www.zpixel.com/staging/test/image.png" class="dragme">
</div>
JS:
$(".dragme").draggable({
containment: ".container"
});
Here is the JSFiddle : https://jsfiddle.net/v28r9v3r/1/
Related
Hello stackoverflow community. I am using lightGallery plug-in and have a problems with making it running with external kind of button in my case anchor tag, can you suggest what have i done wrong or maybe any other way to get it working right.
HTML
Enter full screen view
<div class="owl-carousel" id="selector1">
<div class="item" data-src="img/1.jpg" name="fullscreen"><img src="img/1.jpg">
</div>
JavaScript
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
$('#selector1').lightGallery({
selector: '.item'
});
lightGallery plug-in: http://sachinchoolur.github.io/lightGallery/docs/#installation
Here are some things that might/will cause problems:
The href attribute does not work like that. The link will just open another website. Instead you need to execute some javascript to activate the fullscreen mode, when the link is clicked.
You have two opening <div> tags, but only one closing. Also, you should close the <img> tag.
You probably want all of your posted javascript in the $(document).ready(function() {}); function
There is no element with the id lightgallery.
I don't know anything about the data-src attribute.
This should fix most of the problems, however it will not enable the fullscreen functionality:
html
<div class="owl-carousel" id="lightgallery">
<div class="item" data-src="img/1.jpg">
<img src="img/1.jpg" />
</div>
</div>
javascript
$(document).ready(function() {
$('#lightgallery').lightGallery({
selector: '.item'
});
});
Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.
the structure of the HTML is as follows:
<div class="whatever">
<img id="noonecares" src="pff"></img>
</div>
and not
<img ></img>
I'm not talking about zooming in the photos but displaying the whole image onclick instead
I'm looking for a Jquery solution preferably.
The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...
Thank y'all
If you just want a simple inline image expander then jQuery's toggleClass() is perfect for that. You shrink the images to a fixed size with CSS and then toggle it with a click.
DEMO
Something like
<div>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRvA_rqizvEgVJhJwLbpgMz7CgGwnjW5BlXHrBNzRwRXsq7O3Gi" />
</div>
script
$("div").on("click", function() {
window.open($("img").attr("src"), "_blank", "menubar=1,resizable=1");
});
?
jsfiddle: http://jsfiddle.net/chrisbenseler/6GW6M/
This is my approach.
<div class="whatever">
<img id="noonecares" src="http://imagizer.imageshack.us/v2/100x75q90/21/0ss1.jpg"></img>
</div>
Script
$('.whatever').on('click','#noonecares', function(){
window.open($(this).attr('src'));
});
JSfiddle: http://jsfiddle.net/hFp6z/
UPDATE: If you want a plugin to zoom full size, then you can check fancybox or lightbox.
I chose Swipebox as my lightbox because the requirements that I want is that it is swipable in mobile devices ad is responsive.
I mainly used this for images. However, I have a use case where I want to use Swipebox to show HTML.
Can this be done?
If this feature is not supported by Swipebox, are there any alternatives that support the featureset that I am looking for(swipeable + responsive + can show HTML)?
Swipebox can display inline content. Probably is not documented but you can view it in this issue answer:
https://github.com/brutaldesign/swipebox/issues/248
...
...
<div style="display: none">
<div id="slide1">Slide 1 Content</div>
<div id="slide2">Slide 2 Content</div>
</div>
I use the option "afterOpen: function () {}" clean the content of swipebox and put my content there. Here is my code:
var html = $('the HTML');
$('.swipebox').swipebox({
afterOpen: function () {
$('#swipebox-slider').empty();
$('#swipebox-slider').append(html);
}
});
I found this one (bxSlider) but I have not tried it yet. It claims to support what you need.
Perhaps your CSS isnt loaded correctly.
Check to make sure that you have the following code within your head:
<link rel="stylesheet" href="source/swipebox.css"/>
Hope this helps,
#_Sub
Be gentle I am new to this web dev game. I'm just trying to learn.
CODE:
<h4>Monday</h4>
<div id="first_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
<h5>Second Section</h5>
<div>
Some stuff.
</div>
</div>
<h4>Tuesday</h4>
<div id="second_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("[id$=_accordian]").accordion({ collapsible: true, active: false });
});
</script>
Obviously this is just a simplification of a partial view I have in and ASP.NET MVC3 app. But I am using jQuery UI and the accordion widget, so you will need to reference those for the code above to work.
QUESTION:
I have an issue here that when I expand an accordion element it will overlay any HTML underneath it. The behaviour I want is that I have a set of stacked accordions that all shift up or down when any element is selected in any of the accordions.
Does anyone know how I can do this with stacked accordions? Or thinking laterally. Is there any way I can add static headers that aren't accordion elements inline to the accordion (show above as the headers above each accordion; Monday, Tuesday)?
Is there are resizing event of something I should bind to? I'm at a loss as to where to start, any pointers welcome!
EDIT: Have just copied my own code into a file to check and experiment... and it works exactly how I need it to. But it doesn't in my app. So I'm guessing this must be down to something else going on outside of my code.
So... New question: What could stop something from resizing and creating this overlay problem?
I have searched a lot and couldn't found the approach to create the small text box right next to the cursor, when doing hover over on HTML object.
Example http://guyzyl.org/wp/Picture1.png
You can see cursor is not visible in this example, but the text box appears on hover over. I would like to create some thing similar.
Example is taken from the Facebook.
Thanks for the help
tooltips can be obtained on tags adding the title attribute to them, e.g.:
my link
fancier looking tooltips can be obtained using javascript but the above is the correct semantic option (many tooltip plugins expect it to be in your code anyway)
Use this :
<img title="my tooltip" src="" alt=""/>
It's called tooltip. write like this for example:
<div class="parent">
<p>create group</p>
<div class="tooltip">tooltip</div>
</div>
CSS
.tooltip{
display:none;
}
.parent:hover .tooltip{display:block;}
Check this http://jsfiddle.net/zDLzF/
There are many fancy tooltips available. The Simplest jQuery Tooltip Ever - http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery