Hello guys,
I want to apologize in advance for my English.
Im about to embedd this plugin to my Indexibit website (built with indexhibit.com)
I would like to give the visitors an option to zoom into detailed images of my portfolio when mousehovering over the imgage. i followed some instructions and so far uploaded the jquery.zoom.js onto my server in the js-folder.
Also I tried to edit the index.php, which you can see at the end of my post.
the thing is, i want to make the plugin work for all my projects, but dont know where and how to edit the index.php furthermore. What I think I already did is I "called" jquery and the plugin within the head of my html file.
Can anybody help me with defining a script for a html tag (a div or a span for example) that the plugin should "work" for? Also I'm pretty clueless about including style sheet values and markup in the css file, as well as including it in the body of the file.
If you need a link to my website let me know, ill send it via pm.
Thanks in advance, hope to find help here.
----------
<!doctype html>
<html lang='{{site_lang}}'>
<head>
<meta charset='utf-8'>
<title><last:ndxz_title /> : {{obj_name}}</title>
<last:page:meta />
<link rel='alternate' type='application/rss+xml' title='RSS' href='{{baseurl}}/xml/' />
<link rel='stylesheet' href='{{baseurl}}/ndxzsite/{{obj_theme}}/reset.css<last:page:version: />' type='text/css' />
<link rel='stylesheet' href='{{baseurl}}/ndxzsite/{{obj_theme}}/base.css<last:page:version: />' type='text/css' />
<link rel='stylesheet' href='{{baseurl}}/ndxzsite/{{obj_theme}}/style.css<last:page:version />' type='text/css' />
<last:page:css />
<last:page:javascript />
<last:page:onready /><plugin:backgrounder />
</style>
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
});
</script>
</head>
<body>
<span class='zoom' id='ex1'>
<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>Hover</p>
</span>
<span class='zoom' id='ex2'>
<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<body class='{{object}} section-{{section_id}} exhibit-{{id}} format-{{format}}'>
<div id='index'>
<div class='container'>
<div class='top'>{{obj_itop}}</div>
<plugin:index:load_index />
<div class='bot'>{{obj_ibot}}</div>
<last:page:append_index />
</div>
</div>
<div id='exhibit'>
<div class='container'>
<div class='top'><!-- --></div>
<!-- text and image -->
<plugin:page:exhibit />
<!-- end text and image -->
</div>
</div>
<plugin:page:append_page />
<plugin:page:closing />
</body>
</html>
--------------