Ergebnis 1 bis 4 von 4

Thema: jQuery Zoom mit CMS Indexhibit

  1. #1
    Neuer Benutzer
    Registriert seit
    29.05.2016
    Beiträge
    2

    jQuery Zoom mit CMS Indexhibit

    Hallo liebe Forengemeinde,

    ich bin neu hier und dabei, dieses Plugin

    https://github.com/jackmoore/zoom

    (variante mouseover) in meine Website einzubinden. Wenn man auf der Website auf einzelne Projekte klickt, sollen die Bilder/Zeichnungen beim mouseover vergrößert werden.

    Ich habe bereits die Dateien jquery.zoom.js sowie jquery.zoom.min.js auf den Server verfrachtet, zu den anderen javascript Dateien. Nun habe ich begonnen, die index.php zu editieren (Kopie vorhanden!), jedoch fehlt sicher noch einiges, worüber ich mir als Anfängerin nicht im Klaren bin.

    Hier mal die index.php mit der bisherigen Bearbeitung durch mich:

    Code:
    <!doctype html>
    <html lang='{{site_lang}}'>
    <head>
    <meta charset='utf-8'>
    <title><last:ndxz_title /> : {{obj_name}}</title>
    <last:page:meta />
    
    <link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
    
<script type="text/javascript" src="jquery.zoom.js"></script>

    
    <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 />
    </head>
    <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>
    Das 'cycle.css' in Zeile 8 ist natürlich falsch, denn es geht hier um jQuery Zoom, aber ich hatte den Code adaptiert von einem anderen Beispiel, bei dem es um das cycle Plugin ging. Kann mir jemand einen Wink geben, wie dies nun in meinem Fall umgeschrieben werden müsste? Website Link sende ich gerne per PM.

    Vielen Dank fürs Lesen!

  2. #2
    Neuer Benutzer
    Registriert seit
    29.05.2016
    Beiträge
    2
    Habe jetzt nochmal etwas an dem Code gearbeitet. Bitte kann mal ein Profi drüberschauen?

    Code:
    <!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='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> 
    + <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
    
    <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>

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •