To get the arrows, you need the development version and to include something like:
[rotatingtweets screen_name='dotcapital' rotation_type = 'carousel' show_meta_reply_retweet_favorite = '1' carousel_horizontal='1' show_meta_prev_next='1' np_pos='bottom' prev='< ' next='>']
You’ll need to move the arrows where you want them with CSS.
PS: The tweet holder is normally:
div.rotatingtweets
except when it’s set up not to rotate when it’s
div.norotatingtweets
and each tweet is
div.rotatingtweet
[F12] is normally handy for this.
The development version is here.
Hi Martin,
Thanks for the quick reply. I did have the development version installed. Here is what I am using:
[rotatingtweets screen_name=’dotcapital’ rotation_type = ‘carousel’ show_meta_reply_retweet_favorite = ‘1’ carousel_horizontal=’1′ show_meta_prev_next=’1′ np_pos=’bottom’ prev='<‘ next=’>’]
There are still a few questions I needed help with.
1. The stair step affect is still happening when float:left on div.rotatingtweet. Is there anyway you might recommend styling these so that the tweets display in “boxes” instead of a “stacked” list? I had to float:left and set a width to .rotatingtweet.
2. Can the “carousel” effect rotate from right to left,instead of top to bottom, similar to scrollLeft here: http://jquery.malsup.com/cycle/browser.html?
3.When you click on the arrows it jumps back to the header, shouldn’t it be scrolling to the next “tweet”?
4.Can the “next/prev” buttons be an image?
5. What does carousel_horizontal=’1′ do?
Thanks much!
I updated the Development version to try and fix the problem when I posted. Is that the version you are using?
Martin
Hi Martin!
No, I am sorry. I didn’t realize it was a brand new edited version. I have now downloaded from your previous link. What would be the best way to replace the previous development version? Should I uninstall the original then upload/install the new one, or should I just copy and replace the entire folder in my plugins folder?
Thanks!
Noel
PS Just so we are on the same page, this is the effect that I am looking to do (minus the bullets below and thumbnails):
http://amazingcarousel.com/examples/jquery-image-carousel-with-text-id7/
Just upload it over the top and you should be fine!
Wow! You are amazing! Thank you! We’re getting close!
Here’s what I am using now:
Example 1
[rotatingtweets screen_name=’dotcapital’ rotation_type = ‘carousel’ no_rotate=’1′ show_meta_reply_retweet_favorite = ‘1’ carousel_horizontal=’1′ tweet_count=’4′ show_meta_prev_next=’1′ np_pos=’bottom’ prev='<‘ next=’>’]
But I am getting 4 duplicates of the same tweet:
http://phoogoodev.com/southpark/wp-content/themes/phoogoo/lib/img/FirefoxScreenSnapz012.jpg
Then when I changed rotation type to “slideLeft” it looks correct showing four,
Example 2
[rotatingtweets screen_name=’dotcapital’ rotation_type = ‘scrollLeft’ no_rotate=’1′ show_meta_reply_retweet_favorite = ‘1’ carousel_horizontal=’1′ tweet_count=’4′ show_meta_prev_next=’1′ np_pos=’bottom’ prev='<‘ next=’>’]
but when you click on the next arrow, it doesn’t scroll to the next post.
Here’s a page with example 1 above then example 2 below:
http://phoogoodev.com/southpark/about
Example 2 looks correct with 4 tweets, but need the “scrolling” of Example 1, does that make sense?
Any thoughts?
Thanks!
Four duplicates of the same Tweet is weird.
You definitely need to keep 'carousel' as the rotation_type (although I might do some coding to improve the naming). 'slideLeft' will definitely not give you the transition you need.
Do the Tweets appear 4 times over in the HTML? Or is it a styling/JavaScript thing?
It’s hard to do more without seeing the page itself.
Sorry, the page itself is the one I referenced in the last reply: http://phoogoodev.com/southpark/about/
If you scroll down, the first one has Example 1, you can see the duplicate tweets, then below is the Example 2 ‘slideleft’ version that “looks’ the way I want but doesn’t scroll.
I am looking to show 4 tweets but then when you click on the right arrow, the next tweet shows. Does that make sense?
Thanks!
I’m not seeing the horizontal scrolling code.
Have you definitely got carousel_horizontal='1' in your shortcode?
And have you definitely uploaded the latest development version of the plug-in?
Does it show:
'carousel_horizontal' => 0
on line 505?
Incidentally, you need to remove 'no_rotate' from the second shortcode.
I am using the development version, I replaced the version I had with the development version you linked to me in this thread.
To avoid any confusion, I am just using Example 1:
[rotatingtweets screen_name=’dotcapital’ rotation_type = ‘carousel’ show_meta_reply_retweet_favorite = ‘1’ carousel_horizontal=’1′ show_meta_prev_next=’1′ np_pos=’bottom’ prev='<‘ next=’>’ tweet_count=’4′]
As you can see I do have carousel_horizontal=’1′ in my shortcode.
Are you not seeing this: http://phoogoodev.com/southpark/wp-content/themes/phoogoo/lib/img/FirefoxScreenSnapz012.jpg
On this page where I have the short code?:http://phoogoodev.com/southpark/about/
What file are you referring line 505?
Thank you!
OK. Checked again and it appears to be working.
I think it’s something in your theme stylesheet CSS. I tried removing it all via the console – and the Tweets looked odd – but they worked properly! 🙂
One thing that definitely looks wrong is:
#content div.rotatingtweets {
height: 300px;
}
Some of your wordwrapping is also a bit strange and I think you might want a fixed width for your tweet container.
Martin
Hi Martin,
I fixed the duplicates by adding overflow: hidden; to .rotatingtweet.
Its not completely working for me but I think its closer… I removed the height for #content div.rotatingtweets, I think I was just testing heights out.
I have the tweet width set to a “responsive” grid setup, because I need it to respond to browser width.
A few issues:
Firefox: It looks close styling-wise (shows 4 tweets horizontally) but the arrows don’t work. They link to “#”??? For the sake of debugging I have made the arrows red so you can see them.
Chrome & Safari: Arrows show up below the tweets even though its position is set to absolute. Is there a reason why these show up differently on these browsers? Also, the padding and text wrap is correct in firefox but way off in these browsers. Is there a special page wrap in the core files overriding my styles?
Thanks again!
There is a way of being responsive, but we need to add an extra couple of flags – including fixing the number of slides – and remove any sizing.
More details on the JQuery 2 plug-in page as follows:
It’s important that your slides do not have a declared width or height for this to work properly. The slideshow below has the following style rule applied:
div.responsive img { width: auto; height: auto }
I probably won’t be able to add the extra flag until late this evening.
The alternative is to fix the size of the sildes and have the ‘responsiveness’ happen by changing the number of slides that show across the page.
Which of the two do you want? And how many slides do you want?
