Image Carousel

By: Nick Laux | Asked: 12/02/2022
ForumsCategory: General questionsImage Carousel
Nick Laux asked 1 year ago
Hey everyone,  I'm building a real estate site where I am allowing the users to upload a number of photos via a form with an upload fileld on it. What I would like to do is to take those uploaded images and turn them into a carousel inside a view.  The file uploader field outputs the images as a string ('image1.jpg, image2.jpg" etc etc), so it "seems" like I should somehow be able to loop through these filenames and drop them into a jQuery carousel, but I'm not sure how to add jQuery to a View. If there's a better / easier way to accomplish this task, I'd love to hear about it, otherwise perhaps someone can give me a hint on how I might run a jquery loop inside of a view.    Thanks! ~Nick
Rob LeVineRob LeVine replied 1 year ago

In general, you can add jQuery to the view by putting the code anywhere in the before or after content and the skeleton of the code will look like this - https://paste2.org/6NO7Ny4O If you need 3rd party js files you can include them by the standard means seen here https://www.w3schools.com/tags/att_script_src.asp

3 Answers
Bobby Clapp answered 1 year ago

A couple of options:
Wordpress standard shortcode: [gallery ids="[x show=id sep=',']" link="file"]

Seems doable with a plugin. https://getshortcodes.com/docs/image-carousel/

[su_image_carousel source="media: [x show=id sep=',']"]

Nick Laux replied 1 year ago

Hi Bobby,

Thanks for the idea. I tried a different one that was available through the add plugins menu, (UIX Shortcodes), which also has an image slider shortcode in it.

However so far, I couldn't integrate it with the FF shortcode.

Here's what the formatting looks like for UIX.

[uix_imageslider effect='slide' draggable='true' auto='true' paging='false' arrows='true' speed='1200' timing='6000'][uix_imageslider_item image='[image url]'][/uix_imageslider_item][/uix_imageslider]

I have tried replacing the image url with image=[112 show=id, sep=','] as you suggested, buut... no joy. I have also tried simplifying it to just be image=[112] and image=[112, sep=','] and neither worked.

Finally, just to make sure the UIX shortcode was working at all, I tried it with a url from the media library, and it worked fine.

Might you have any other suggestions for me? I'm hoping it's just a formatting not a compatibility issue. 🙂

thanks!

Bobby Clapp answered 1 year ago

The standard shortcode appears to limit the output of each image to this for each item: [uix_imageslider_item url='linkhere' title='Test' desc='Test' image='imageurlhere'][/uix_imageslider_item]

Your form then might contain a repeater for the image uploads with fields for url, title, description, and then the image upload itself. You'll then need to know a bit about how to set up a view for a repeater. https://formidableforms.com/knowledgebase/repeatable-section/#kb-displaying-repeater-fields

So you'll end up having something like this in the repeater view:
[foreach 100]
[uix_imageslider_item url='[101]' title='[102]' desc='[103]' image='[104]'][/uix_imageslider_item]
[/foreach]

And then this in the final product on the page you are trying to show the image carousel:
[uix_imageslider effect='slide' draggable='false' auto='true' paging='true' arrows='false' speed='1200' timing='7000'][display-frm-data id="1000" filter="limited"][/uix_imageslider]

[display-frm-data id="1000" filter="limited"] 1000 would be the ID of the view for the repeater

Nick Laux replied 1 year ago

Hi Bobby,

Thanks for your response, I actually got it to work using JQuery, but there's one thing I 'm a bit confused about.

It only seems to work on one detail page for a property. Here's a working example.

https://www.propzsearch.com/property-detail/property/14/

but it does not work on any other of the detail pages, like

https://www.propzsearch.com/property-detail/property/75/ or https://www.propzsearch.com/property-detail/property/77/

Here's how it works:

In my view, I have a hidden div that I put the output from the fille uploader into ( "#prop-photos"). The file uploader outputs a comma delimited string. I add the urls to this fiield using a standard FF shortcode [field number] which is 112 so [112].

Also in the view, I have some jQuery that gets the text from that hidden tiv, turns it into an array and adds the html to the page by looping through the file urls and appending to the specific div on the page, which looks like this:

jQuery(function($) {
pszphotos = jQuery('#prop-photos').html().split(",");
pszlength = pszphotos.length;
console.log("pszlength: " + pszlength);
i = 0;

for(i; i < pszlength; i++) {
$('.your-slider').append("<div style='background: url(" + pszphotos[i] + ") center center / cover no-repeat')");
}

There's a bit more to it to get it to animate / have navigation arrows, but this is the basic functionality that adds the images from the field to the page.

IIt works as expected in the first link, but in all of my other property detail pages, the hidden field is blank (it's not populating the file upload urls)..

So I'm not sure why this is. I thought maybe the view is only loading/running the code once, and not each time I switch to a new property page, but that doesn't make sense, as it only seems to work on the first link.

The part that loads the file upload urls to the div is just a standard [field number] FF shortcode, so seems like that should work 100% of the time, but it doesn't seem to be? (Only seems to be working on the that one specific page).

I continue to appreciate your help.

Bobby Clapp replied 1 year ago

Where does the jQuery code reside within the view? Before content, listing page content, or after content?

Nick Laux replied 1 year ago

Here's what my view looks like:

[if 111 not_equal=""][111][/if 111]
[157], [158], [161] [160]

$ [126 thousands_sep=","]

[112] //THIS IS THE DIV WHERE FILE URLS ARE ADDED IN A HIDDEN FIELD

THIS IS WHERE JQUERY ADDS IMAGES FOR SLIDER

This property marketed by:

[150 show="avatar"]

[150 show="first_name"] [150 show="last_name"]

[215]

jQuery(function($) {
pszphotos = jQuery('#prop-photos').html().split(",");
pszlength = pszphotos.length;
console.log("pszlength: " + pszlength);
i = 0;

for(i; i < pszlength; i++) {
$('.your-slider').append("<div style='background: url(" + pszphotos[i] + ") center center / cover no-repeat')");
}

$('.your-slider').carouselLineArrow({
lineDur: 6000,
slideDur: 600,
heightIsProportional: true,
linePosition: 'bottom',
lineHeight: '10px',
lineColor: 'orange'
});
});

Nick Laux replied 1 year ago

Sorry, in replying to your comment, it's messing with the formatting of my reply, which may be difficult for you to view.. apologies.

Nick Laux answered 1 year ago
Hi Bobby, I'm replying this way as well, since this has a code block that will hopefully make things more clear.   Here is my view:   
<div class="detail-hdr-wrapper">
        <div class="detail-hdr-left-col">
            <h3>[if 111 not_equal=""][111][/if 111]</h3>
            <h5>[157], [158], [161] [160]</h5>
        </div>
        <div class="detail-hdr-right-col">
            <h3>$ [126 thousands_sep=","]</h3>
        </div>
</div>
<div id="prop-photos">[112]</div>  //Photo urls from file uploader go here.

<div class="detail-body-wrapper">
    <div class="wrapper">
        <div class="your-slider">
            //This is where jQuery creates the slide divs from the urls.
        </div>
    </div>

        <div id="prop-seller-wrapper">
            <div class="seller-tagline">This property marketed by:</div>
            <div class="seller-img-wrapper">
                [150 show="avatar"]
            </div>
            <div class="seller-info">
                <span class="seller-name">[150 show="first_name"] [150 show="last_name"]</span>
                <br />
                [215]
            </div>
        </div>
     
     </div>

<script>
      jQuery(function($) {
pszphotos = jQuery('#prop-photos').html().split(",");
pszlength = pszphotos.length;
console.log("pszlength: " + pszlength);
i = 0;

for(i; i < pszlength; i++) {
$('.your-slider').append("<div class='your-slider-item'><div style='background: url(" + pszphotos[i] + ") center center / cover no-repeat')</div></div>");
}

 $('.your-slider').carouselLineArrow({
              lineDur: 6000,
              slideDur: 600,
              heightIsProportional: true,
              linePosition: 'bottom',
              lineHeight: '10px',
              lineColor: 'orange'
          });
});
</script>


I hope that worked better. :)

Thanks,

Nick

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right