Title: webamies's Replies | WordPress.org

---

# webamies

  [  ](https://wordpress.org/support/users/webamies/)

 *   [Profile](https://wordpress.org/support/users/webamies/)
 *   [Topics Started](https://wordpress.org/support/users/webamies/topics/)
 *   [Replies Created](https://wordpress.org/support/users/webamies/replies/)
 *   [Reviews Written](https://wordpress.org/support/users/webamies/reviews/)
 *   [Topics Replied To](https://wordpress.org/support/users/webamies/replied-to/)
 *   [Engagements](https://wordpress.org/support/users/webamies/engagements/)
 *   [Favorites](https://wordpress.org/support/users/webamies/favorites/)

 Search replies:

## Forum Replies Created

Viewing 2 replies - 1 through 2 (of 2 total)

 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [jQuery & Bootstrap Based Elegant Slider/Carousel Plugin – slidey](https://wordpress.org/support/topic/jquery-bootstrap-based-elegant-slidercarousel-plugin-slidey/)
 *  Thread Starter [webamies](https://wordpress.org/support/users/webamies/)
 * (@webamies)
 * [8 years, 10 months ago](https://wordpress.org/support/topic/jquery-bootstrap-based-elegant-slidercarousel-plugin-slidey/#post-9441474)
 * Good Morning,
    I downloaded a jQuery Slider Plugins to fit my page, but it did
   not work. I see that the problem is at the level of a jquery.slidey.js file.
 * How can I adapt this file to the wordpress function?
    [Here you have the link where I downloaded](http://www.jqueryscript.net/slider/jQuery-Bootstrap-Based-Elegant-Slider-Carousel-Plugin-slidey.html)
 * And the Jquery :
 *     ```
       /* global jQuery: false, console: false */
       /* jshint undef: true, unused: false */
       /*! jQuery Bootstrap Slidey - v0.0.1 - 2016-01-11
        * http://www.tahapaksu.com
        * Copyright (c) 2016 Taha PAKSU; Licensed  */
       (function($) {
           $.slidey = function(el, options) {
               // To avoid scope issues, use 'base' instead of 'this'
               // to reference this class from internal events and functions.
               var base = this;
               // Access to jQuery and DOM versions of element
               base.$el = $(el);
               base.el = el;
               // Add a reverse reference to the DOM object
               base.$el.data("slidey", base);
               // define slider specific variables
               base.slides = [];
               base.layout = {};
               base.activeSlideIndex = -1;
               base.timer = 0;
               base.hfr = 0;
               base.init = function() {
                   base.options = $.extend({}, $.slidey.defaultOptions, options);
                   // Put your initialization code here
                   base.fetchSlides();
                   base.constructLayout();
                   base.showLoading();
                   base.hideLoading();
                   base.gotoSlide(2);
                   base.startSliding();
               };
               base.fetchSlides = function() {
                   if (base.$el.find("ul").size() > 0) {
                       base.$el.find("ul").first().children("li").each(function() {
                           var slide = {},
                               $this = $(this);
                           slide.image = ($this.find("img").size() > 0) ? $this.find("img").first().attr("src") : -1;
                           if (slide.image === -1) {
                               throw ("Structure error: item has no img tag.");
                           }
                           slide.title = ($this.find("p.title").size() > 0) ? $this.find("p.title").first().html() : "";
                           slide.description = ($this.find("p.description").size() > 0) ? $this.find("p.description").first().html() : "";
                           base.slides.push(slide);
                       });
                   }
               };
               base.constructLayout = function() {
                   // hide the container first.
                   base.$el.hide();
                   // build new structure
                   var domdocument = "";
                   if (base.options.showList) {
                       domdocument += "<div class='slidey-row row'><div class='slidey-image col-md-8'><div class='slidey-overlay'>";
                   } else {
                       domdocument += "<div class='slidey-row row'><div class='slidey-image col-md-12'><div class='slidey-overlay'>";
                   }
                   domdocument += "<p class='slidey-overlay-title'></p><p class='slidey-overlay-description'></p>";
                   domdocument += "<span class='slidey-progress'></span>";
                   domdocument += "</div></div><div class='slidey-list col-md-4'></div></div>";
                   // append new structure
                   base.$el.empty().append(domdocument);
                   // set dom node links
                   base.layout.$row = base.$el.find(".slidey-row").first();
                   base.layout.$image = base.$el.find(".slidey-image").first();
                   base.layout.$list = base.$el.find(".slidey-list").first();
                   base.layout.overlay = {};
                   base.layout.overlay.progressWidth = -1;
                   base.layout.$overlay = base.$el.find(".slidey-overlay").first();
                   base.layout.overlay.$title = base.$el.find(".slidey-overlay-title").first();
                   base.layout.overlay.$description = base.$el.find(".slidey-overlay-description").first();
                   base.layout.overlay.$progress = base.$el.find(".slidey-progress").first();
   
                   // create controls
                   var controls = "<div class='slidey-controls slidey-controls-previous'><i class='fa fa-chevron-left'></i></div>";
                      controls += "<div class='slidey-controls slidey-controls-next'><i class='fa fa-chevron-right'></i></div>";
   
                   base.layout.$image.append(controls);
   
                   // create list items
                   var $list = $("<ul></ul>");
                   base.layout.$list.append($list);
                   for (var slideIndex = 0; slideIndex < base.slides.length; slideIndex++) {
                       var $li = $("<li></li>");
                       var elements = "<table class='slidey-list-table'><tr>";
                       elements += "<td rowspan='2' class='slidey-list-thumbnail-container'>";
                       elements += "<div class='slidey-list-thumbnail' style='background-image: url(\"" + base.slides[slideIndex].image + "\")'>";
                       elements += "</td><td class='slidey-list-title'>" + base.slides[slideIndex].title + "</td>";
                       elements += "</tr><tr>";
                       elements += "<td class='slidey-list-description'>" + base.slides[slideIndex].description + "</td>";
                       elements += "</tr></table>";
                       $li.append(elements);
                       $list.append($li);
                   }
                   // hide list when defined as not to show
                   if (base.options.showList === false) {
                       base.layout.$list.hide();
                   }
                   // show the slidey
                   base.$el.show();
   
                   // calculate list item heights
                   var sliderHeight = base.layout.$image.innerHeight();
                   var oneSlideListItemHeight = parseInt(sliderHeight) / base.options.listCount;
   
                   // set list item thumbnail dimensions
                   var thumbWidth = oneSlideListItemHeight - 9;
                   base.layout.$list.find(".slidey-list-thumbnail").css("width", thumbWidth).css("height", thumbWidth);
                   base.addEventListeners();
   
                   // set list item heights
                   base.layout.$list.find("li").each(function() {
                       var $this = $(this);
                       var spaceBetweenSlides = $this.outerHeight() - $this.innerHeight();
                       $this.height(oneSlideListItemHeight - spaceBetweenSlides);
                       var $description = $(".slidey-list-description", $this)
                       $description.width($this.innerWidth() - $(".slidey-list-thumbnail-container", $this).width());
                       $description.height($this.height() - $(".slidey-list-title").height());
                       $description.css("display", "block");
                   });
   
                   // add nodes if required
                   base.prepareNodes();
               };
               base.addEventListeners = function() {
                   base.layout.$list.on("click", "li", function() {
                       base.gotoSlide(base.layout.$list.find("li").index($(this)));
                   });
                   base.layout.$image.on("click", ".slidey-controls-previous", function(){
                       base.stopTimer();
                       base.slidePrevious();
                   });
                   base.layout.$image.on("click", ".slidey-controls-next", function(){
                       base.stopTimer();
                       base.slideNext();
                   });
               };
               base.showLoading = function() {};
               base.hideLoading = function() {};
               base.startSliding = function() {
                   base.gotoSlide(0);
               };
               base.startTimer = function() {
                   base.timer = setTimeout(base.slideNext, base.options.interval);
                   base.layout.overlay.$progress.stop(true, true).css("width", "0");
                   base.layout.overlay.$progress.animate({
                       width: base.layout.overlay.progressWidth + "px"
                   }, base.options.interval);
               };
               base.stopTimer = function() {
                   clearTimeout(base.timer);
                   base.layout.overlay.$progress.stop();
                   base.layout.$overlay.stop();
                   if (base.layout.overlay.progressWidth === -1) {
                       base.layout.overlay.progressWidth = base.layout.overlay.$progress.originalWidth();
                   }
               };
               base.slideNext = function() {
                   base.gotoSlide(base.activeSlideIndex + 1);
               };
               base.slidePrevious = function() {
                   base.gotoSlide(base.activeSlideIndex - 1);
               };
               base.gotoSlide = function(slideIndex) {
                   if (slideIndex < 0) {
                       slideIndex = base.slides.length - 1;
                   } else if (slideIndex >= base.slides.length) {
                       slideIndex = 0;
                   }
                   base.activeSlideIndex = slideIndex;
                   base.stopTimer();
                   if (base.options.showList) {
                       base.layout.$list.find("li").eq(slideIndex).scrollToView(".slidey-list", base.options.listCount);
                   }
                   base.layout.$overlay.fadeOut("fast", function() {
                       if (base.options.showList) {
                           base.layout.$list.find("li").removeClass("slidey-active");
                           base.layout.$list.find("li").eq(slideIndex).addClass("slidey-active");
                       }
                       base.layout.$image.css("background-image", "url(" + base.slides[slideIndex].image + ")");
                       base.layout.overlay.$title.empty().append(base.slides[slideIndex].title);
                       base.layout.overlay.$description.empty().append(base.slides[slideIndex].description);
                       base.layout.$overlay.fadeIn("fast");
                       base.selectNode(slideIndex);
                       base.startTimer();
                   });
               };
               base.prepareNodes = function(){
                   if(base.options.showNodes)
                   {
                       if(base.options.nodeContainer !== "" && $(base.options.nodeContainer).size() > 0)
                       {
                           base.layout.$nodeContainer = $(base.options.nodeContainer);
                           var $nodebase = $("<div class='slidey-node-container'></ul>");
                           for (var slideIndex = 0; slideIndex < base.slides.length; slideIndex++) 
                           {
                               var node = "<div class='slidey-node' style='background-image: url(\"" + base.slides[slideIndex].image + "\");'></div>";
                               $nodebase.append(node);
                           }
                           base.layout.$nodeContainer.empty().append($nodebase);
   
                           $(".slidey-node",base.layout.$nodeContainer).on("click", function(){
                               base.gotoSlide(base.layout.$nodeContainer.find(".slidey-node").index($(this)));
                           });
                       }
                   }
               };
               base.selectNode = function(nodeIndex)
               {
                   if(base.options.showNodes)
                   {
                       if(base.options.nodeContainer !== "" && $(base.options.nodeContainer).size() > 0)
                       {
                           var $nodes = base.layout.$nodeContainer.find(".slidey-node");
                           $nodes.removeClass("active");
                           $nodes.eq(nodeIndex).addClass("active");
                       }
                   }
               };
               // Run initializer
               base.init();
           };
           $.slidey.defaultOptions = {
               interval: 3000,
               listCount: 5,
               showList: true,
               showNodes: false,
               nodeContainer: ""
           };
   
           $.fn.slidey = function(options) {
               return this.each(function() {
                   (new $.slidey(this, options));
               });
           };
   
           $.fn.scrollToView = function(parentSelector, listCount) {
               var $this = $(this);
               var $parent = $this.parents(parentSelector).first();
               var itemIndex = $this.parent().find("li").index($this.get(0));
               if ($parent) {
                   if (itemIndex >= listCount) {
                       var $itemToHide = $this.parent().find("li").eq(itemIndex - listCount);
                       $parent.stop().animate({
                           scrollTop: $itemToHide.position().top + $itemToHide.originalHeight() + 2
                       }, '300', 'swing');
                   } else {
                       $parent.stop().animate({
                           scrollTop: 0
                       }, '300', 'swing');
                   }
               }
           };
           $.fn.originalWidth = function() {
               var domElement = $(this)[0];
               if (typeof domElement !== "undefined") {
                   return domElement.getBoundingClientRect().width;
               } else {
                   return null;
               }
           };
           $.fn.originalHeight = function() {
               var domElement = $(this)[0];
               if (typeof domElement !== "undefined") {
                   return domElement.getBoundingClientRect().height;
               } else {
                   return null;
               }
           };
       })(jQuery);
       ```
   
 * gracias
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [background image header](https://wordpress.org/support/topic/background-image-header/)
 *  Thread Starter [webamies](https://wordpress.org/support/users/webamies/)
 * (@webamies)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/background-image-header/#post-9026074)
 * resolved!!!
 *     ```
       <!-- TOP-HEADER -->
               <header>
        <?php 
               $header_image = get_header_image();
               if ( ! empty( $header_image ) ) { ?>
   
                   <div id="hacienda-header" style="background-image:url(<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo get_bloginfo( 'name' ); ?>)" />
       </div> </header>
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)