How can i create a second image instead of filling like words


Kady

I have the code below. I use this to use 1 image and use the "rel" and "title" tags to fill in the words to display with the actual image. This will create a banner-like system that uses text instead of all images. Right now, what I'm trying to do is populate the image with a "rel" tag; however, don't know how to modify this javascript code to do this.

<img title="This is a title that will appear as text above the image" rel="image1" alt="SEO Image 1" src="../images/backdrop2.png">

As you can see, rel is equal to image1...so all it needs to do is use that to make...

<img class="something" src="images/image1.png">

All it does is populate that 1 position with the word in "rel" and it automatically populates the rest of the code.

<script type="text/javascript">
  jQuery(function( $ ){

    var efx  = "fade", // "slide" || "fade"
            animationTime = 600,
            pauseTime = 4000,
      $gal = $("#images_holder"),
        $mov = $("#moving_part"),
        $sli = $mov.find("> div"),
        $btn = $("#prev, #next"),
            $dsc = $("#description"),
            $wrd = $("#word"),
            w = $gal.width(),
            n = $sli.length,
            c = 0,  // Counter // Start index
            itv;    // Interval


    // SETUP (fade or slide?)
    $mov.width(w*n);
    if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0);

    function populateWord() {
        $wrd.text( $sli.eq(c).find("img").attr("rel") );
    }   

    function populateDescription() {
        $dsc.text( $sli.eq(c).find("img").attr("title") );
    }

    function anim() {
        c = c<0 ? n-1 : c%n; // loop-back if exceedds
        populateDescription();
        populateWord();
        if (efx==="fade") {
            $sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime);
        }else if(efx==="slide") {
            $mov.stop().animate({left: -c*w});
        }
    }

    function auto() {
        itv = setInterval(function(){
           ++c;
           anim();
        }, pauseTime);
    }

    function pause() {
        return clearInterval( itv );
    }

  $gal.hover(pause, auto);

    $btn.on("click", function(){
        c = this.id==="next" ? ++c : --c;
        anim();
    });


    populateDescription();
    populateWord();
    auto();

  });
</script>
Vinayakj
function populateWord() {
    var src = 'images/'+$sli.eq(c).find("img").attr("rel")+'.png';
    $wrd.html('<img class="something" src="'+src+'">');
} 

Related


How can i create a second image instead of filling like words

Kady I have the code below. I use this to use 1 image and use the "rel" and "title" tags to fill in the words to display with the actual image. This will create a banner-like system that uses text instead of all images. Right now, what I'm trying to do is popu

How can i create a second image instead of filling like words

Kady I have the code below. I use this to use 1 image and use the "rel" and "title" tags to fill in the words to display with the actual image. This will create a banner-like system that uses text instead of all images. Right now, what I'm trying to do is popu

How can I create a layout like in the image?

icosahedron I want an image like this but when the texts are not of equal length the distance between the TextViews changes and when there are too many words go to the next line. The xml code for the layout I created is: <?xml version="1.0" encoding="utf-8"?>

How can I create a shape in android like the image I added?

Aksukumar Maldeh Can anyone tell me how to create a shape that is somewhat rectangular but ends up being a triangle. Jack' I would use the gradient image from the drawable folder. Let's call it background.png. You can also do it with the icons searchicon.png a

How can I create a shape in android like the image I added?

Aksukumar Maldeh Can anyone tell me how to create a shape that is somewhat rectangular but ends up being a triangle. Jack' I would use the gradient image from the drawable folder. Let's call it background.png. You can also do it with the icons searchicon.png a

How can I create a plist like the image below?

Navier I am trying to create a plist with the following functionality. Inside the plist there are two keys 1.id 2.status The current value is id: 91 status: buy where the id should be unique. If I try to add a third entry like id:91 status:downlaod it should r

How can I create a color combination like an attached image?

Knicks 290192 I want to create background in Xcode like attached image. Any suggestions? swift boy The best way is to always use Image as background let navBackgroundImage:UIImage! = UIImage(named: "your_background_image_name_here") If you just want to set th

How can I create a plist like the image below?

Navier I am trying to create a plist with the following functionality. Inside the plist there are two keys 1.id 2.status The current value is id: 91 status: buy where the id should be unique. If I try to add a third entry like id:91 status:downlaod it should r

How can I get words in word ranges instead of characters?

Zheng Youwei I want to get word by using word vba. I tried this API but it only returns sequences of character words. file.range(start, end) example: This is a book I have never read. enter: API(2,5) output: a book i I hope some API can input the start positio

How can i create a figure like this

Ilushahot Do I want to create such a graph using CSS? I browsed and found rectangles, ovals, but haven't come across them yet. picture: Accompanying Afif A skew transform can do this: .box { height: 400px; width: 400px; position: relative; border-left:

How can i create a figure like this

Ilushahot Do I want to create such a graph using CSS? I browsed and found rectangles, ovals, but haven't come across them yet. picture: Accompanying Afif A skew transform can do this: .box { height: 400px; width: 400px; position: relative; border-left:

How can i create a figure like this

Ilushahot Do I want to create such a graph using CSS? I browsed and found rectangles, ovals, but haven't come across them yet. picture: Accompanying Afif A skew transform can do this: .box { height: 400px; width: 400px; position: relative; border-left:

How can i create a figure like this

Ilushahot Do I want to create such a graph using CSS? I browsed and found rectangles, ovals, but haven't come across them yet. picture: Accompanying Afif A skew transform can do this: .box { height: 400px; width: 400px; position: relative; border-left:

How can i create a figure like this

Ilushahot Do I want to create such a graph using CSS? I browsed and found rectangles, ovals, but haven't come across them yet. picture: Accompanying Afif A skew transform can do this: .box { height: 400px; width: 400px; position: relative; border-left:

How can I configure .htaccess subpages like a second domain?

Nelson I have two domains (eg: domain1.com and domain2.com ) and wordpress is installed in the first domain domain1.com . I want the page domain1 .com/pageABC/ and subpages to appear and be accessed using domain2 .com I tried configuring the .htaccess to hide

How can I have multiple values using LIKE instead of IN?

Luca Montessori I want to replace In with Like to make the query work. SELECT 1 AS coddit, COD_CAT AS cam_cod, DES_CAT AS cam_desc, LIVELLO_CAT AS livello, COD_CAT_PADRE AS cat_padre, COD_L1, COD_L2, COD_L3, COD_L4, COD_L5, COD_L6 FROM dbo.C

How can I set an image in vuetify like the linked image below?

Mohammad Reza Esmerzad I want to quantify v-imgthe kind you see in the image below. Is there a way to make something similar to the image you are seeing with vuetify's image v-img. <div class="row"> <v-img style="margin:2px" max-height="301" max-width="