#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0

    Help please, I don't understand how to use this CSS!


    Hi,

    I have a CSS which I need to use, It is basically a slideshow which I need to display several images, using a fluid grid layout on Dreamweaver CS6!

    I can't actually use it properly, if someone could give me a hand I would appreciate it a lot

    Thank you
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    Can you provide your HTML and CSS please?

    It's impossible to help without seeing any code.

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0
    It won't let me post the code

    Code:
    /* * jQuery Blueberry Slider v0.4 BETA * http://marktyrrell.com/labs/blueberry/ * * Copyright (C) 2011, Mark Tyrrell <me@marktyrrell.com> * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. * */ (function($){ $.fn.extend({ blueberry: function(options) { //default values for plugin options var defaults = { interval: 5000, duration: 500, lineheight: 1, height: 'auto', //reserved hoverpause: false, pager: true, nav: true, //reserved keynav: true } var options = $.extend(defaults, options); return this.each(function() { var o = options; var obj = $(this); //store the slide and pager li var slides = $('.slides li', obj); var pager = $('.pager li', obj); //set initial current and next slide index values var current = 0; var next = current+1; //get height and width of initial slide image and calculate size ratio var imgHeight = slides.eq(current).find('img').height(); var imgWidth = slides.eq(current).find('img').width(); var imgRatio = imgWidth/imgHeight; //define vars for setsize function var sliderWidth = 0; var cropHeight = 0; //hide all slides, fade in the first, add active class to first slide slides.hide().eq(current).fadeIn(o.duration).addClass('active'); //build pager if it doesn't already exist and if enabled if(pager.length) { pager.eq(current).addClass('active'); } else if(o.pager){ obj.append('<ul class="pager"></ul>'); slides.each(function(index) { $('.pager', obj).append('<li><a href="#"><span>'+index+'</span></a></li>') }); pager = $('.pager li', obj); pager.eq(current).addClass('active'); } //rotate to selected slide on pager click if(pager){ $('a', pager).click(function() { //stop the timer clearTimeout(obj.play); //set the slide index based on pager index next = $(this).parent().index(); //rotate the slides rotate(); return false; }); } //primary function to change slides var rotate = function(){ //fade out current slide and remove active class, //fade in next slide and add active class slides.eq(current).fadeOut(o.duration).removeClass('active') .end().eq(next).fadeIn(o.duration).addClass('active').queue(function(){ //add rotateTimer function to end of animation queue //this prevents animation buildup caused by requestAnimationFrame //rotateTimer starts a timer for the next rotate rotateTimer(); $(this).dequeue() }); //update pager to reflect slide change if(pager){ pager.eq(current).removeClass('active') .end().eq(next).addClass('active'); } //update current and next vars to reflect slide change //set next as first slide if current is the last current = next; next = current >= slides.length-1 ? 0 : current+1; }; //create a timer to control slide rotation interval var rotateTimer = function(){ obj.play = setTimeout(function(){ //trigger slide rotate function at end of timer rotate(); }, o.interval); }; //start the timer for the first time rotateTimer(); //pause the slider on hover //disabled by default due to bug if(o.hoverpause){ slides.hover(function(){ //stop the timer in mousein clearTimeout(obj.play); }, function(){ //start the timer on mouseout rotateTimer(); }); } //calculate and set height based on image width/height ratio and specified line height var setsize = function(){ sliderWidth = $('.slides', obj).width(); cropHeight = Math.floor(((sliderWidth/imgRatio)/o.lineheight))*o.lineheight; $('.slides', obj).css({height: cropHeight}); }; setsize(); //bind setsize function to window resize event $(window).resize(function(){ setsize(); }); //Add keyboard navigation if(o.keynav){ $(document).keyup(function(e){ switch (e.which) { case 39: case 32: //right arrow & space clearTimeout(obj.play); rotate(); break; case 37: // left arrow clearTimeout(obj.play); next = current - 1; rotate(); break; } }); } }); } }); })(jQuery);
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    3
    Rep Power
    0
    As it says it contains a URL, and i'm sure you don't want to scroll through the whole of my code with just a scroll box!
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Originally Posted by sdereli1993
    As it says it contains a URL, and i'm sure you don't want to scroll through the whole of my code with just a scroll box!
    Paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog). Fortunately though, this forum is scheduled for a very badly needed upgrade.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo