http://www.kriesi.at/support/topic/aviaslider-slide-transitions Support Forum - Topic: AviaSlider slide transitions en-US Sun, 26 May 2013 06:20:50 +0000 http://bbpress.org/?v=1.0.2 q http://www.kriesi.at/support/search.php http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-92086 Thu, 17 Jan 2013 15:06:25 +0000 AzArgyll 92086@http://www.kriesi.at/support/ <p>Thanks Dude, that worked perfectly. I also appreciate your helping me understand the js a little better. </p> http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-91255 Sat, 12 Jan 2013 10:24:36 +0000 Dude 91255@http://www.kriesi.at/support/ <p>Yes, you can use any of the default transitions. Actually I wouldn't include the entire demo data like you did ( <a href="http://dragonsflight.biz/azscia/js/custom.js" rel="nofollow">http://dragonsflight.biz/azscia/js/custom.js</a> ) but I'd just call the code for the droping-curtain transition. Delete the entire code in custom.js and replace it with:</p> <pre><code>$(document).ready(function(){ //activate the lightbox jQuery(&#39;a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]&#39;).prettyPhoto({theme: &quot;light_square&quot;}); // here you can see the slide options I used in the demo page. depending on the id of the slider a different setup gets activated $(&#39;#frontpage-slider&#39;).aviaSlider({ blockSize: {height: &#39;full&#39;, width:40}, display: &#39;topleft&#39;, transition: &#39;drop&#39;, betweenBlockDelay:80, animationSpeed: 800, switchMovement: true, slideControlls: &#39;items&#39;, appendControlls: &#39;.aviaslider&#39; }); });</code></pre> <p>If you're not familiar with the slider settings please have a look at the documentation which explains all available settings/parameter. An online version can be found here: <a href="http://www.udel.edu/ocm/development/db/igs-aviaslider/aviaslider-jquery-slideshow/documentation_html/#javascript" rel="nofollow">http://www.udel.edu/ocm/development/db/igs-aviaslider/aviaslider-jquery-slideshow/documentation_html/#javascript</a> </p> http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-90873 Thu, 10 Jan 2013 00:32:12 +0000 AzArgyll 90873@http://www.kriesi.at/support/ <p>Hey Dude, I've got another question.</p> <p>I see on the Avia Slider demo page, that "?slider=droping-curtain" is used to reload the page and use the dropping curtains. That's cool that a change can be made quickly, but I want to start with a different transition (i.e. the dropping curtains instead of the blocks) but I 'cant attach the "?slider=droping-curtain" to the main.html in my php file. </p> <p>Is there an easy way to call for a specific transition right from file that calls the scripts and has the unordered list?</p> <p><a href="http://dragonsflight.biz/azscia/normal_index.php" rel="nofollow">http://dragonsflight.biz/azscia/normal_index.php</a> </p> http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-12382 Fri, 04 Feb 2011 16:24:29 +0000 Dude 12382@http://www.kriesi.at/support/ <p>Just replace following code in index.html:<br /> <pre><code>&lt;script type=&#39;text/javascript&#39; src=&#39;js/custom.min.js&#39;&gt;&lt;/script&gt;</code></pre> <p>with:<br /> <pre><code>&lt;script type=&#39;text/javascript&#39;&gt; $(document).ready(function(){ //activate the lightbox jQuery(&#39;a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]&#39;).prettyPhoto({theme: &quot;light_square&quot;}); // here you can see the slide options I used in the demo page. depending on the id of the slider a different setup gets activated $(&#39;#frontpage-slider&#39;).aviaSlider(); }); &lt;/script&gt;</code></pre> <p>This change will remove the block fading effect... </p> http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-12381 Fri, 04 Feb 2011 15:07:37 +0000 ahoffman81 12381@http://www.kriesi.at/support/ <p>Ok. I am posting my "test" homepage in a test folder for now. I am trying to get the Avia Slider to work on my homepage and then I can just swap out the imagery with my own. I don't need the button graphic to work underneath the slider. I am just trying to get the slider to fade in and out... Just a basic slideshow. </p> <p><a href="http://www.alhdesigns.com/test/index.html" rel="nofollow">http://www.alhdesigns.com/test/index.html</a> </p> http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-12380 Fri, 04 Feb 2011 14:17:05 +0000 ahoffman81 12380@http://www.kriesi.at/support/ <p>I am trying to use the Avia slider on my homepage. My site isn't fully developed yet, but when it is live, I will send you a link. The slide transition is minor and won't stop me from designing the site.</p> <p>Thanks! </p> http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-12378 Fri, 04 Feb 2011 13:45:04 +0000 Dude 12378@http://www.kriesi.at/support/ <p>Can you post a link to your website - I can give you better instructions then :) </p> http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-12377 Fri, 04 Feb 2011 13:28:38 +0000 ahoffman81 12377@http://www.kriesi.at/support/ <p>Can you tell me exactly where I need to put the code in order for it to work? And what file am I inserting the code into? Thank you! </p> http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-12362 Fri, 04 Feb 2011 10:23:16 +0000 Dude 12362@http://www.kriesi.at/support/ <p>If you want to use the fullwidth slider just call the avialsider function without blocksize parameter. So instead of i.e.:<br /> <pre><code>$(&#39;#fading-top-curtain&#39;).aviaSlider({ blockSize: {height: 40, width:&#39;full&#39;}, });</code></pre> <p>use:</p> <pre><code>$(&#39;#fading-top-curtain&#39;).aviaSlider();</code></pre> http://www.kriesi.at/support/topic/aviaslider-slide-transitions#post-12334 Thu, 03 Feb 2011 19:41:58 +0000 ahoffman81 12334@http://www.kriesi.at/support/ <p>Where do I change the slide transitions? I want to change the diagonal blocks slide transition to the fullwidth slide fader. Please help! I am a graphic designer who knows basic web design.</p> <p>Thank you! </p>