Nick Laux replied 2 years 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!

Nick Laux replied 2 years 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 2 years ago

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

Nick Laux replied 2 years 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 2 years 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.