Hej,
jeg har på min hjemmeside et image zoom (FancyZoom) og det har fungeret fint på min nuværende side lavet i iWeb.
Nu er jeg igang med en ny side som laves i Adobe Muse og her har jeg problemer med at få det til at virke. Den instruktion som gives er som følger:
Instructions:
Installing FancyZoom on your web pages should be dead simple.
1 Download the FancyZoom package, right here:
FancyZoom 1.1.zip (53 KB)
2 Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.
3 Add the following two lines of code to the <head> section at the top of your web page(s):
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
4 Add onload="setupZoom()" inside your page's existing <body> tag. For example:
<body id="whatever" [...] onload="setupZoom()">
5 Whoah. You're done! The rest is automatic — links to images in your page will automatically zoom the images. For example:
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a> will zoom up image.jpg when clicked.
Jeg har en fornemmelse af, at det er punkt 4 som jeg ikke forstår rigtigt - er der en som kan hjælpe mig til hvad jeg skal sætte ind i <body....
På forhånd tak!
Kurt
Hjælp til FanceZoom (HTML (java script))
Re: Hjælp til FanceZoom (HTML (java script))
Hej kurt,
Det vil hjælpe os meget hvis du kunne dele din kilde kode på siden... du kan bare copypaste det ind her på forumet.
Jeg kunne forestille mig at det er et problem med dine stier eller den måde du kalder funktionen på...
Det vil hjælpe os meget hvis du kunne dele din kilde kode på siden... du kan bare copypaste det ind her på forumet.
Jeg kunne forestille mig at det er et problem med dine stier eller den måde du kalder funktionen på...
-
kurtmalaga
- Begynder
- Indlæg:4
- Tilmeldt:6. feb 2013, 17:19
Re: Hjælp til FanceZoom (HTML (java script))
Ja ok men, jeg har lavet det tidligere uden problemer. Der skrev jeg "onload="onPageLoad(); setupZoom();"" og det virkede - se det på kurtpetersen.dk
Min nye side er lavet i Adobe Muse og kildekoden er følgende:
Min nye side er lavet i Adobe Muse og kildekoden er følgende:
Kode: Vælg alt
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="description" content="Mit Portfolio"/>
<meta name="keywords" content="grafisk design, print og markedsførings materiale"/>
<meta name="generator" content="3.2.2.183"/>
<link rel="shortcut icon" href="images/portfolio-favicon.ico?479585806"/>
<title>Mit portfolio</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?186943996"/>
<link rel="stylesheet" type="text/css" href="css/master_master_dk.css?442017761"/>
<link rel="stylesheet" type="text/css" href="css/portfolio.css?3831603859" id="pagesheet"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
<!--custom head HTML-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38267694-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript">
</script>
</head>
<body>
<div class="rounded-corners clearfix" id="page"><!-- column -->
<div class="position_content" id="page_position_content">
<div class="colelem" id="u812"><!-- image -->
<img id="u812_img" src="images/header.jpg" alt="" width="960" height="240"/>
</div>
<div class="clearfix colelem" id="pu1283"><!-- group -->
<div class="grpelem" id="u1283"><!-- image -->
<img id="u1283_img" src="images/navbar.jpg" alt="" width="960" height="45"/>
</div>
<a class="nonblock nontext grpelem" id="u424" href="index.html"><!-- image --><img id="u424_img" src="images/dan.png" alt="" width="30" height="23"/></a>
<a class="nonblock nontext grpelem" id="u426" href="home.html"><!-- image --><img id="u426_img" src="images/eng.png" alt="" width="30" height="23"/></a>
<a class="nonblock nontext grpelem" id="u433" href="inicio.html"><!-- image --><img id="u433_img" src="images/spain.png" alt="" width="30" height="23"/></a>
<a class="nonblock nontext grpelem" id="u428" href="http://dk.linkedin.com/in/petersenkurt/en"><!-- image --><img id="u428_img" src="images/linkedin.gif" alt="" width="25" height="25"/></a>
<a class="nonblock nontext clearfix grpelem" id="u430-4" href="index.html"><!-- content --><p id="u430-2">Hjem</p></a>
<a class="nonblock nontext clearfix grpelem" id="u422-4" href="om-mig.html"><!-- content --><p id="u422-2">Om mig</p></a>
<a class="nonblock nontext clearfix grpelem" id="u423-4" href="cv.html"><!-- content --><p id="u423-2">CV</p></a>
<a class="nonblock nontext MuseLinkActive clearfix grpelem" id="u421-4" href="portfolio.html"><!-- content --><p id="u421-2">Portfolio</p></a>
<a class="nonblock nontext clearfix grpelem" id="u431-4" href="fotos.html"><!-- content --><p id="u431-2">Fotos</p></a>
<a class="nonblock nontext clearfix grpelem" id="u432-4" href="mailto:mail@kurtpetersen.dk"><!-- content --><p id="u432-2">Kontakt</p></a>
</div>
[b][i]<body id="fancyzoom"onload="(); setupZoom()"[/i][/b]
<div class="clearfix colelem" id="pu510"><!-- group -->
<div class="clearfix grpelem" id="u510"><!-- image -->
<div id="u510_clip">
<img class="position_content" id="u510_img" src="images/portf_content.jpg" alt="" width="960" height="480"/>
</div>
</div>
<a class="nonblock nontext grpelem" id="u515" href="assets/image01.jpg"><!-- image --><img id="u515_img" src="images/image01.png" alt="" width="95" height="95"/></a>
<a class="nonblock nontext grpelem" id="u520" href="assets/image02.jpg"><!-- image --><img id="u520_img" src="images/image02.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u525" href="assets/image03.jpg"><!-- image --><img id="u525_img" src="images/image03.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u530" href="assets/image04.jpg"><!-- image --><img id="u530_img" src="images/image04.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u535" href="assets/image05.jpg"><!-- image --><img id="u535_img" src="images/image05.png" alt="" width="135" height="100"/></a>
<a class="nonblock nontext grpelem" id="u540" href="assets/image06.jpg"><!-- image --><img id="u540_img" src="images/image06.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u545" href="assets/image07.jpg"><!-- image --><img id="u545_img" src="images/image07.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u550" href="assets/image08.jpg"><!-- image --><img id="u550_img" src="images/image08.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u555" href="assets/image09.jpg"><!-- image --><img id="u555_img" src="images/image09.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u560" href="assets/image10.jpg"><!-- image --><img id="u560_img" src="images/image10.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u565" href="assets/image11.jpg"><!-- image --><img id="u565_img" src="images/image11.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u570" href="assets/image12.jpg"><!-- image --><img id="u570_img" src="images/image12.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u575" href="assets/image13.jpg"><!-- image --><img id="u575_img" src="images/image13.png" alt="" width="135" height="100"/></a>
<a class="nonblock nontext grpelem" id="u580" href="assets/image14.jpg"><!-- image --><img id="u580_img" src="images/image14.png" alt="" width="135" height="100"/></a>
<a class="nonblock nontext grpelem" id="u585" href="assets/image15.jpg"><!-- image --><img id="u585_img" src="images/image15.png" alt="" width="135" height="100"/></a>
<a class="nonblock nontext grpelem" id="u590" href="assets/image16.jpg"><!-- image --><img id="u590_img" src="images/image16.png" alt="" width="135" height="100"/></a>
<div class="clearfix grpelem" id="u648-6"><!-- content -->
<p id="u648-2"><span class="Billedtekst">Eksempler på brochurer, annoncer flyers m.m. jeg har lavet gennem tiden </span></p>
<p id="u648-4"><span class="Billedtekst"> Klik på miniaturerne for at se en forstørrelse! </span></p>
</div>
<div class="clearfix grpelem" id="u652-6"><!-- content -->
<p id="u652-2"><span class="Billedtekst">Some examples of brochures, adverts, flyers, and menus I have made. </span></p>
<p id="u652-4"><span class="Billedtekst"> Click on the thumbnails to enlarge!</span></p>
</div>
<div class="clearfix grpelem" id="u654-6"><!-- content -->
<p id="u654-2">Algunos ejemplos de folletos, anuncios, volantes, y menús he hecho. </p>
<p id="u654-4"> Haga clic los pequeños para ampliar!</p>
</div>
<div class="clearfix grpelem" id="u655"><!-- image -->
<div id="u655_clip">
<img class="position_content" id="u655_img" src="images/eng.png" alt="" width="33" height="25"/>
</div>
</div>
<div class="clearfix grpelem" id="u656"><!-- image -->
<div id="u656_clip">
<img class="position_content" id="u656_img" src="images/spain.png" alt="" width="32" height="25"/>
</div>
</div>
<div class="clearfix grpelem" id="u661"><!-- image -->
<div id="u661_clip">
<img class="position_content" id="u661_img" src="images/dan.png" alt="" width="33" height="25"/>
</div>
</div>
<div class="rounded-corners" id="u1020"><!-- simple frame --></div>
<a class="nonblock nontext" id="u1021" href="mailto:mail@kurtpetersen.dk"><!-- rasterized frame --><img id="u1021_img" src="images/email-u1021.png" alt="" width="37" height="40"/></a>
<a class="nonblock nontext" id="u1023" href="http://www.facebook.com/kurt.petersen.564"><!-- rasterized frame --><img id="u1023_img" src="images/img_facebook-u1023.png" alt="" width="34" height="34"/></a>
<a class="nonblock nontext" id="u1025" href="http://dk.linkedin.com/in/petersenkurt/en"><!-- rasterized frame --><img id="u1025_img" src="images/img_linkedin-u1025.png" alt="" width="34" height="34"/></a>
<a class="nonblock nontext" id="u1027" href="https://twitter.com/Kurt_malaga"><!-- rasterized frame --><img id="u1027_img" src="images/img_tweet-u1027.png" alt="" width="34" height="34"/></a>
<div class="clearfix grpelem" id="u1413-4"><!-- content -->
<p>Brochurer</p>
</div>
<div class="clearfix grpelem" id="u1415-4"><!-- content -->
<p>Annoncer</p>
</div>
<div class="clearfix grpelem" id="u1417-4"><!-- content -->
<p>Håndbøger / Manualer</p>
</div>
<div class="clearfix grpelem" id="u1419-4"><!-- content -->
<p>Menukort </p>
</div>
<div class="clearfix grpelem" id="u1420-4"><!-- content -->
<p>Zonekort</p>
</div>
<div class="clearfix grpelem" id="u1421-4"><!-- content -->
<p>Produktblade</p>
</div>
<div class="clearfix grpelem" id="u1422-4"><!-- content -->
<p>Brochurer</p>
</div>
<div class="clearfix grpelem" id="u1423-4"><!-- content -->
<p>Visitkort</p>
</div>
<div class="clearfix grpelem" id="u1424-4"><!-- content -->
<p>Flyers</p>
</div>
<div class="clearfix grpelem" id="u1425-4"><!-- content -->
<p>Menukort </p>
</div>
<a class="nonblock nontext grpelem" id="u3061" href="assets/image002.jpg"><!-- image --><img id="u3061_img" src="images/image002.png" alt="" width="69" height="100"/></a>
<a class="nonblock nontext grpelem" id="u3105" href="assets/image007.jpg"><!-- image --><img id="u3105_img" src="images/image006.png" alt="" width="69" height="100"/></a>
</div>
<div class="clearfix colelem" id="pu264-4"><!-- group -->
<a class="nonblock nontext clearfix grpelem" id="u264-4" href="index.html"><!-- content --><p id="u264-2"><span class="Menu-bund">Hjem</span></p></a>
<a class="nonblock nontext clearfix grpelem" id="u266-4" href="om-mig.html"><!-- content --><p id="u266-2"><span class="Menu-bund">Om mig</span></p></a>
<a class="nonblock nontext clearfix grpelem" id="u259-4" href="cv.html"><!-- content --><p id="u259-2"><span class="Menu-bund">CV</span></p></a>
<a class="nonblock nontext MuseLinkActive clearfix grpelem" id="u261-4" href="portfolio.html"><!-- content --><p id="u261-2"><span class="Menu-bund">Portfolio</span></p></a>
<a class="nonblock nontext clearfix grpelem" id="u265-4" href="fotos.html"><!-- content --><p id="u265-2"><span class="Menu-bund">Fotos</span></p></a>
</div>
<div class="verticalspacer"></div>
<div class="clearfix colelem" id="pu818"><!-- group -->
<div class="grpelem" id="u818"><!-- image -->
<img id="u818_img" src="images/footer.jpg" alt="" width="960" height="96"/>
</div>
<div class="clearfix grpelem" id="u253-4"><!-- content -->
<p id="u253-2">All contents is subject to Copyright © 2011 Webmaster Kurt Petersern * All rights reserves</p>
</div>
<a class="nonblock nontext grpelem" id="u451" href="https://www.adobe.com/products/muse.html"><!-- image --><img id="u451_img" src="images/muse_ico.png" alt="" width="35" height="35"/></a>
</div>
</div>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/1.1/jquery-1.7.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/1.1/jquery-1.7.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/1.1/museutils.js?3944585760" type="text/javascript"></script>
<script src="scripts/1.1/jquery.watch.js?346672883" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
Muse.Utils.addSelectorFn('body', Muse.Utils.transformMarkupToFixBrowserProblemsPreInit);/* body */
Muse.Utils.addSelectorFn('body', Muse.Utils.prepHyperlinks); /* body */
Muse.Utils.fullPage('#page'); /* 100% height page */
Muse.Utils.addSelectorFn('body', Muse.Utils.showWidgetsWhenReady);/* body */
Muse.Utils.addSelectorFn('body', Muse.Utils.transformMarkupToFixBrowserProblems);/* body */
</script>
</body>
</html>-
Daniel
- Admin
- Indlæg:625
- Tilmeldt:14. jun 2011, 09:27
- Geografisk sted:Danmark, Fyn, Nørre Aaby
- Kontakt:
Re: Hjælp til FanceZoom (HTML (java script))
Hejsa. 
Dit <body> tag skal være sådan her:
onload="" før at hver gang din nogen går inde på din side så henter den funktionen man har skrevet inde mellem "" tegnene.
Hvis det ikke er nok, så prøve eventuelt at lave hele din sides link i dine <script> tags, altså fx. http://nemprogrammering.dk/js-global/FancyZoom.js
Dit <body> tag skal være sådan her:
Kode: Vælg alt
<body onload="setupZoom()">
Hvis det ikke er nok, så prøve eventuelt at lave hele din sides link i dine <script> tags, altså fx. http://nemprogrammering.dk/js-global/FancyZoom.js
-
kurtmalaga
- Begynder
- Indlæg:4
- Tilmeldt:6. feb 2013, 17:19
Re: Hjælp til FanceZoom (HTML (java script))
Hej Daniel,
Tak for forslagene som jeg har prøvet - begge dele - og desværre virker det ikke.
Jeg fatter ikke en brik af det, for det virker perfekt på min gamle side lavet i iWeb - der lavede jeg siden eller siderne færdige i iWeb. Efter jeg havde lagt det hele op på serveren åbnede jeg siden, portfolio.html, i Coda og lagde FancyZoom scriptet ind i head sektionen og derefter load funktionen ind i body delen - og det gav mig ingen problemer overhovedet.
Nu bruger jeg Adobe Muse, som er fantastisk let at arbejde i, men det her kan jeg godt nok ikke få til at virke!!
m.v.h
Kurt
Tak for forslagene som jeg har prøvet - begge dele - og desværre virker det ikke.
Jeg fatter ikke en brik af det, for det virker perfekt på min gamle side lavet i iWeb - der lavede jeg siden eller siderne færdige i iWeb. Efter jeg havde lagt det hele op på serveren åbnede jeg siden, portfolio.html, i Coda og lagde FancyZoom scriptet ind i head sektionen og derefter load funktionen ind i body delen - og det gav mig ingen problemer overhovedet.
Nu bruger jeg Adobe Muse, som er fantastisk let at arbejde i, men det her kan jeg godt nok ikke få til at virke!!
m.v.h
Kurt
-
kurtmalaga
- Begynder
- Indlæg:4
- Tilmeldt:6. feb 2013, 17:19
Re: Hjælp til FanceZoom (HTML (java script))
Hej igen Daniel,
Har leget lidt med det hele og det viser sig at der var fejl i scriptet - den seneste version jeg havde downloadet. Da jeg kopierede det javascript som lå på min gamle side og erstattede load functionen med det du har skrevet, virkede det perfekt.
Tak for hjælpen!
Har leget lidt med det hele og det viser sig at der var fejl i scriptet - den seneste version jeg havde downloadet. Da jeg kopierede det javascript som lå på min gamle side og erstattede load functionen med det du har skrevet, virkede det perfekt.
Tak for hjælpen!
-
Daniel
- Admin
- Indlæg:625
- Tilmeldt:14. jun 2011, 09:27
- Geografisk sted:Danmark, Fyn, Nørre Aaby
- Kontakt:
Re: Hjælp til FanceZoom (HTML (java script))
Sådan kan det jo gå, bare træls når man har siddet i lang tid med det, uden at kunne finde en løsning, det er noget af det mest fustrerende når man roder med web programmering. 