search

jmpressjs / jmpress.js

A jQuery plugin to build a website on the infinite canvas
http://jmpressjs.github.com/jmpress.js
1.5k stars 237 forks source link

inline attribute data-next and data-prev not working #139

Closed sweetguy0883 closed 10 years ago

sweetguy0883 commented 10 years ago

Hello, The inline attribute data-next and data-prev not working for me. Can you please tell me what might be the problem? I have got 2 different files for Jmpress.js and none of them are working. The version notes are as follows : 


/*!
* jmpress.js
*
* a jQuery port of https://github.com/bartaz/impress.js based on the power of
* CSS3 transforms and transitions in modern browsers and inspired by the idea
* behind prezi.com.
*
* Copyright 2012, Kyle Robinson Young @shama
* Copyright 2012, Tobias Koppers @sokra
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Based on the foundation laid by Bartek Szopka @bartaz
*/

and


/*!
 * jmpress.js v0.4.5
 * http://jmpressjs.github.com/jmpress.js
 *
 * A jQuery plugin to build a website on the infinite canvas.
 *
 * Copyright 114 Kyle Robinson Young @shama & Tobias Koppers @sokra
 * Licensed MIT
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Based on the foundation laid by Bartek Szopka @bartaz
 */
/*
 * core.js
 * The core of jmpress.js
 */

It would be also kind of somebody if you can tell me which version is the latest one.

sokra commented 10 years ago

Here are the lastest versions: https://github.com/jmpressjs/dist

sweetguy0883 commented 10 years ago

Hello @sokra , Thanks for the link but still the data-next and data-prev is not working. I am using the jmpress.all.js file the my code just the example code shown in http://jmpressjs.github.io/docs/ways.html with the inline deta-next attribute. Please help...

sweetguy0883 commented 10 years ago

My Code is 


<body>
    <div id="jmpress">
        <div class="step" id="a" data-next="c">A</div>
       <div class="step" id="b" data-x="1000">B</div>
       <div class="step" id="c" data-x="2000">C</div>
       <div class="step" id="d" data-x="3000">D</div>
    </div>

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jmpress.all.js"></script>

    <script type="text/javascript">
        $('#jmpress').jmpress();
    </script>
</body>
sokra commented 10 years ago

Hmm the example is wrong:

data-next must be a jquery selector.

<div id="jmpress">
    <div class="step" id="a" data-next="#c">A</div>
    <div class="step" id="b">B</div>
    <div class="step" id="c">C</div>
    <div class="step" id="d">D</div>
</div>
sweetguy0883 commented 10 years ago

Thanks a lot. I got it now. I was trying it as the same but unfortunately with the old version of the Jmpress.js. Thanks again @sokra

sweetguy0883 commented 10 years ago

Hello @sokra , I have a small question. My code is : 


<div id="start" class="step"></div>
            <div id="intro" class="step" data-x="2000">
                <img src="tour/03.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/04.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/05.jpg" class="image will-fade" data-jmpress="fade" />
          </div>
           <div data-duration="500" class="step" data-x="2000" data-z="1000"></div>
           <div data-duration="500" class="step" data-x="4000" data-y="-1000" data-z="1000" data-next="#chapter1"></div>
          <div id="to-intro" data-duration="500" class="step" data-x="4000" data-y="-1000" data-z="1000"></div>
          <div data-duration="500" class="step" data-x="2000" data-z="1000" data-next="#intro"></div>
          <div id="chapter1" class="step" data-x="4000" data-y="-1000" data-prev="#to-intro">
                <img src="tour/07.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/08.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/09.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/10.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/11.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/12.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/13.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/14.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/15.jpg" class="image will-fade" data-jmpress="fade" />
              <img src="tour/16.jpg" class="image will-fade" data-jmpress="fade" />
          </div>

Now, when I am trying to get back from div#chapter1 , I am being redirected to the base of the div#intro . Is there a way that I can go back to the last image of the div#intro ?

sokra commented 10 years ago

can you please prepare a jsfiddle

sweetguy0883 commented 10 years ago

Hello, The jsfiddle was not working properly, so I uploaded to one of my unused domains: http://www.1dollarsolution.com Here if you want to come back from the Chapter1 (#chapter1) then it comes to the beginning of the previous div (#intro). But I want to make it come to the last span of the previous div (#intro span:last - i.e. Intro C). Thanks @sokra

sokra commented 10 years ago 
<div id="chapter1" class="step" data-x="4000" data-y="-1000" data-prev="#intros">

Going back will go to the last animation.

sweetguy0883 commented 10 years ago

Yes but in this case the zooming effect which I had made by 2 intermediate steps, does not work. And that is my problem

sokra commented 10 years ago

With duration a next action is executed. Going with next to a slide starts at the first animation. Going with prev to a slide starts at the last animation. You can change the action executed by duration with data-duration-action="prev"

sweetguy0883 commented 10 years ago

@sokra Thank you very much... I think I am done with the presentation now... Thanks a lot....

sweetguy0883 commented 10 years ago

Hi @sokra Just out of curiosity, how do you input these colorful html codes like you did in your reply? As it is off-topic, I did not open the thread but it would be really nice to know that. Thanks in advance

sokra commented 10 years ago

https://help.github.com/articles/github-flavored-markdown