Jump to content
quinntinm

boxes or similar displayed on a specific part of the page

Recommended Posts

quinntinm    4
quinntinm

Hi there.

 

I have split a page into columns and want to add a set of "boxes" or whatever will work to display a "slideshow" of products in one of the columns. So not across the full width of the page.

Click on the product image to go to the product.

 

Is this possible?

How do i do it?

 

Thanks.

 

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

I don't fully understand what you're trying to achieve but if I understood, you could use the PageLines Grid for your columns and then use the Carousel shortcode for your slideshow.

 

http://support.pagelines.me/docs/miscellaneous/shortcodes/

http://support.pagelines.me/docs/miscellaneous/grid-system/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
quinntinm    4
quinntinm

Hi Danny.

if you can imagine that i have split the width into three.

i want the "slideshow/slider/carousel" to be in the 1third column and some text in the "2thirds" column.

Is it possible to specify the width of a carousel or is it driven by the size of the image?

And can i specify the delay before the next item comes through?

 

thanks.

Share this post


Link to post
Share on other sites
quinntinm    4
quinntinm

Hi Danny, i have got a bit mote info on the carousel, i am not sure it is right for what i want.

 

Basically i want a quickslider type functionality, which i can position anywhere and specify the height width.

 

Is this doable?

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

You can position the QuickSlider pretty much anywhere. And you can specify the height/width by adjusting the size of your images. It will automatically adjust the height based on the height of your images.. and the width is based on the width of the content area it's placed in.  Aside from that, you're also welcome to make any adjustments with custom CSS.


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
quinntinm    4
quinntinm

Hi Jenny.

How do i position the quickslider in the content of a page?

Is there a shortcode to use?

 

See the attachment for positioning.

 

thanks.

 

 

 

 

post-20847-0-89403400-1359477122_thumb.p

Share this post


Link to post
Share on other sites
quinntinm    4
quinntinm

Hi Catrina, thanks for the info - i understand how it works, but i was wanting to know how i can add it so a specific part of the page.

 

For example:

 

[row]
     [span7]

          recent posts here
     [/span7]


     [span1][/span1]


     [span4]

          SLIDESHOW / QUICKSLIDER HERE.
     [/span4]


[/row]

 

 

 

The way you suggest it will be placed across the full page width.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

hi Quinntinm 

 

Have you had a look here http://demo.pagelines.me/tools/ 

 

You should be able to add the Image Carousel using the code example 

[span4]
[pl_carousel name="PageLinesCarousel"][pl_carouselimage first="yes" title="Slide 1" imageurl="" ]
caption 1
[/pl_carouselimage][pl_carouselimage title="Slide 2" imageurl=""]
caption 2
[/pl_carouselimage]
[/pl_carousel]
[/span4]

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
quinntinm    4
quinntinm

Hi there, i tried that, but i get a "blank" slide between each of the real slides.

 

i used this code:

 

I replaced the url as the site is under dev for a client.

 

 [pl_carousel name="PageLinesCarousel"][pl_carouselimage first="yes" title="1" imageurl="http://XXXXXXXXXXX/wp-content/uploads/2013/01/hp-prod-antagolin.jpg" ][/pl_carouselimage]
    [pl_carouselimage title="2" imageurl="http://XXXXXXXXXXX/wp-content/uploads/2013/01/hp-prod-neurovance.jpg"][/pl_carouselimage]
    [pl_carouselimage title="3" imageurl="http://XXXXXXXXXXX/wp-content/uploads/2013/01/hp-prod-peak.jpg"][/pl_carouselimage]
    [pl_carouselimage title="4" imageurl="http://XXXXXXXXXXX/wp-content/uploads/2013/01/hp-prod-rychol.jpg"][/pl_carouselimage]
    [/pl_carousel]

 

 

I can pm the url to you if you like.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Yes if you could send is the URL i will take a look 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
quinntinm    4
quinntinm

Hey Martin, did you get my PM with the Url?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The reason for the blank slide is Wordpress is adding a <p></p> tags due to your adding a new line between each of your slides. To resolve this, either remove all the line breaks in your Carousel code so it looks something like this:

 

[pl_carousel name="PageLinesCarousel"][pl_carouselimage first="yes" title="1" imageurl="http://XXXXXXXXXXX/w...d-antagolin.jpg" ] [/pl_carouselimage][pl_carouselimage title="2" imageurl="http://XXXXXXXXXXX/w...-neurovance.jpg"] [/pl_carouselimage][pl_carouselimage title="3" imageurl="http://XXXXXXXXXXX/w...p-prod-peak.jpg"] [/pl_carouselimage][pl_carouselimage title="4" imageurl="http://XXXXXXXXXXX/w...prod-rychol.jpg"] [/pl_carouselimage][/pl_carousel]

Or you can wrap the [pl_raw] shortcode around your Carousel code, but you can only use this once per page.

 

Example,

 

[pl_raw]

[pl_carousel name="PageLinesCarousel"][pl_carouselimage first="yes" title="1" imageurl="http://XXXXXXXXXXX/w...d-antagolin.jpg" ] [/pl_carouselimage]
    [pl_carouselimage title="2" imageurl="http://XXXXXXXXXXX/w...-neurovance.jpg"] [/pl_carouselimage]
    [pl_carouselimage title="3" imageurl="http://XXXXXXXXXXX/w...p-prod-peak.jpg"] [/pl_carouselimage]
    [pl_carouselimage title="4" imageurl="http://XXXXXXXXXXX/w...prod-rychol.jpg"] [/pl_carouselimage]
    [/pl_carousel]

[/pl_raw]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
quinntinm    4
quinntinm

Hi Danny, cool, thanks for that.

 

One last question, how do i add a link - what is the tag for links in this code option?

 

I have tried imagelink="", link="", url="" and none work.

 

thanks.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The Carousel shortcode doesn't support adding a link to the images unfortunately. However, you can do the following:

 

Where you add the text to the Carousel, you can add the HTML so you can add a button, see the code below as an example:

 

 

<a href="http://www.pagelines.com" target="_BLANK" class="btn btn-mini btn-success">Link here</a> 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×