I'm trying to add a jquery zoom plugin within a turn.js magazine flipping effect. I've got them both working separately, but can't get the zoom effect within each magazine page like I'd want. Some of the code is below. All ideas are appreciated, thanks.
<!-- Zoom script -->
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function()
{
$('#ex1').zoom();
});
</script>
<!-- Zoom html -->
<span class='zoom' id='ex1'>
<img src='pages/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
</span>
<!-- Magazine html -->
<div id="magazine">
<div style="background-image:url(pages/01.jpg);">
</div>
<div style="background-image:url(pages/02.jpg);">
</div>
<div style="background-image:url(pages/03.jpg);">
</div>
in similar situations i used successfully anythingZoomer
it makes easy to zoom arbitrary html elements, given taht a bit of tweaking is needed in order to suit your needs
Related
I found a problem I can't solve by myself. I just want to render a jsvectormap, so the odd thing is when it renders it is way too small.
In addition to that there is a big black block in the site itself. Also when I scroll the site to 200% and then backwards it is then on normal size. And what is also very odd I completely copied it from another blade from my project.
It looked like the problem from this post:
jVectorMap renders too small but I found no solution with the hints from there.
I am very close to just cancel the vectormap and I have no problem with that but I am now very eager to just solve that problem!
I would very appreciate some hints because I didn't find the right solution. Thank you very much in advance
I tried:
Using .updateSize(); change the actual size of the map but only if I use that many times, like in a for. The black block is even there.
Other JQuery functions afterwards like .width() .height() .css()m - nothing worked
Copied the code 1:1 from another blade so I don't think it is because of css
I tried every solution from this post: jVectorMap renders too small
My code:
<script src="{{ asset('js/plugins/jvectormap/dist/jquery-jvectormap.min.js') }}"> </script>
<script src="{{ asset('js/plugins/jvectormap/maps/jquery-jvectormap-world-mill-en.js') }}"> </script>
<script src="{{ asset('js/jquery_vector_map.js') }}"></script>
<link rel="stylesheet" href="{{ 'js/plugins/jvectormap/dist/jquery-jvectormap.css' }}">
<!-- World Map -->
<div class="col-xl-12 js-appear-enabled animated fadeIn" data-toggle="appear" data-timeout="800">
<div class="block block-rounded block-bordered">
<div class="block-header block-header-default">
<h3 class="block-title">Studies - <small> {{ date("F", strtotime("this month")) }} </small> </h3>
<div class="block-options">
<button type="button" class="btn-block-option">
<i class="si si-settings"></i>
</button>
</div>
</div>
<div class="block-content block-content-full">
<!-- World Map Container -->
<div id="world-map-studies" class="js-vector-map-world" style="height: 500px;"></div>
</div>
</div>
</div>
<!-- END World Map -->
Interesting, I am using it very similar way and in my case it renders correctly. Which browser have you tried? Aren't you trying from a device with Retina display or some huge resolution?
You can try my implementation, if this renders ok for you: https://sevenhillsaway.com/map/
I know I was fighting with it as well. If I remember setting the height also helped me.... Maybe some other Divs are influencing it in the design?
Scenario:
I have stacked (layered) images that represents various part of the image.
Two there transparent png together makes a product. I am changing particular png images based on dropdown. So user can customize the product.
Problem:
Now what I want is to implement product zoom functionality into this. All jquery plugin I have found so far is based on single image.
How to I implement the image zoom functionality that doesn't take a single image to zoom it but perhaps the whole container of stacked images?
[edit]
What I have tried so far:
I have tried Anything Zoomer jQuery Plugin but it didn't work. You can see it here. The code I used to implement is below.
HTML
<div id="image-canvas">
<div class="small">
<div data-filter="filter1" class="layer layer1"><img alt="smaller" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd-266x400.png"></div>
<div data-filter="filter2" class="layer layer2"><img alt="smaller" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000-266x400.png">/div>
</div>
<div class="large">
<div data-filter="filter1" class="layer layer1"><img alt="larger" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd.png"></div>
<div data-filter="filter2" class="layer layer2"><img alt="larger" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000.png"></div>
</div>
</div>
JS
$("#image-canvas").anythingZoomer({
smallArea : 'small',
largeArea : 'large',
});
Note:
Transparent PNG's are absolute positioned.
You can use the panzoom library.
Include it in your header and add a div with an id that you can later reference with the panzoom functions.
HTML
<div id="panzoom">
<img src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd-266x400.png">
<img src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000-266x400.png">
</div>
<div>
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
</div>
jQuery
$('#panzoom').panzoom({
$zoomIn: $(".zoom-in"),
$zoomOut: $(".zoom-out"),
$zoomRange: $(".zoom-range")
});
I am making a desktop-like website, and I want to drag my windows around. I am using jQuery-UI and .draggable(). My current code looks like this:
<div id="window"> <!-- You'll drag this whole div -->
<div id="title">Window name</div> <!-- You drag with this -->
<div id="content"></div> <!-- You cannot drag this -->
</div>
And with my JS I just did this:
$("#window").draggable();
I want this because I need to select text from #content, which is hard to do if it's draggable.
The code I think should be...
$("#content").draggable('disable');
There was a similar question to this here... jquery disable dragging
I guess you need this
$("#window").draggable({ handle: "title" });
I have 90+ divs with an image/icon in each div. I want it so that when I click one of them, that image appears in another div. What would be a decent way to do this? I don't know much about JS yet, so a little example of this with HTML would be appreciated, also limited to html5, Ajax and js.
EDIT: I should clarify that the div I want the content to go into is already made, it doesn't have to be created as well.
<link href="CSS/mainSource.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="display()">
<div id="testBox">
<div id="contentScroller">
<!-- I want to click one of these... -->
<div id="ahri"><img src="images/LoLchamps/Ahri.png" width="64" height="64"></div>
<div id="akali"><img src="images/LoLchamps/Akali.png" width="64" height="64"></div>
<div id="alistar"><img src="images/LoLchamps/Alistar.png" width="64" height="64"></div>
<div id="amumu"><img src="images/LoLchamps/Amumu.png" width="64" height="64"></div>
<!-- ...and clone the div OR content from clicked div/image into a div that I'll set up below the clear fix -->
<div style="display: block; clear: both;"></div>
</div>
</div>
<script type="text/javascript">
var myScroll = new iScroll('testBox');
</script>
</body>
</html>
Thanks.
- Ken B.
Try this (you need Jquery libary loaded)
$(document).ready(function () {
$("div.selecters").click(
function () {
$("#clone").html($(this).html());
});
});
This is an example, it would not work on your HTML unless i guessed lucky with my classes and id's
Here is a DEMO
read about :target in css3
its pretty easy
with CSS3 no much use of JS
read a simple but great tutorial
On css3-tricks
and the demo
it really worth reading
I am using a Wordpress Theme (Incipiens) that has a show/hide Javascript to show a map on the contact page http://demo.themedev.me/wordpress_themes/incipiens/contact-us/
I want to use this function on a page multiple times to show/hide galleries.
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<a class="show_map" href="javascript:void(0)"></a>
<div class="map_container"><div class="thismap"><iframe>........</iframe></div>
</div>
I have this working but the call to the js opens all divs. I therefore put a unique div id round each gallery and slightly changed the javscript...
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<div id="silestone">
<div class="map_container">
[show_gallery width="124" height="124" galleryid="527"][/show_gallery]
</div>
</div>
</div>
It works but very oddly, sometimes the right one opens, sometimes the wrong one...not sure what i'm doing wrong, should I just have one javascript call that contains the ID's to all divs? If so how do I do this?
Since you have not shown the actual script you use for toggling, I assume you mean something like this (taken from the page) -
function (){
$(this).toggleClass('hide_map');
$('.map_container').slideToggle(400);
}
I would change that to -
function unhide(id){
$(this).toggleClass('hide_map');
$('#' + id).find('.map_container').slideToggle(400);
}
Does that work?