Rich-text Reply

Carousel images experiment

henrikb 02-25-15
Accepted Solution

Carousel images experiment

Hi! Robot Happy

 

I'd like to A/B test the image carousel with other campaigns/images. This is the code on the site:

 

<div class="slideshow-container">
<div class="slideshow" id="promotions">
<img src="http://www.yasuragi.se/wp-content/themes/yasuragi/images/placeholder.jpg" class="sizer">

 

<!--<div class="slide active" style="background:#333333;"><img src="http://www.yasuragi.se/wp-content/themes/yasuragi/images/front.jpg" /><div class="offer"><h1>A great family weekend</h1>
<h2>FRÅN SEK 6900</h2><a href="#" class="more"><span>LÄS MER</span></a></div>
</div>-->

<div class="slide"><img src="/wp-content/uploads/2013/11/319A7203-860x445.jpg"><div class="img-shadow"></div><div class="offer"><h5><a href="http://www.yasuragi.se/paket#dagpaketmedbehandling">Dagpaket med behandling</a></h5></div></div>

 

<div class="slide"><img src="/wp-content/uploads/2015/01/Namnlöst-1-e1420793410523-860x445.jpg"><div class="img-shadow"></div><div class="offer"><h5><a href="http://www.yasuragi.se/paket#ikebana"><span style="color: #ffffff;">Kom till ro med&nbsp;Ikebana</span></a></h5><h6><a href="http://www.yasuragi.se/paket#ikebana"><span style="color: #ffffff;">Pris övernattning 1990 kr</span></a></h6></div></div>

 

<div class="slide"><img src="/wp-content/uploads/2013/11/badet_poolen-860x445.jpg"><div class="img-shadow"></div><div class="offer"><h5><a href="http://www.yasuragi.se/paket#sondagar-tokyomiddag">EN BRA START PÅ VECKAN</a></h5>
<h6><a href="http://www.yasuragi.se/paket#sondagar-tokyomiddag">från 1550 kr. Prisex söndagar &amp; måndagar</a></h6></div></div>

 

<div class="slide active"><img src="/wp-content/uploads/2013/11/19A8888-860x445.jpg"><div class="img-shadow"></div><div class="offer"><h5><a title="Årets SPA 2014" href="http://yasuragi.se/omoss#aretsspa2014">Årets Spa 2014</a></h5></div></div>
<ul class="nav" style="display: block;"><li><a class="" data-item="0" href="#"><span>0</span></a></li><li><a href="#" data-item="1" class=""><span>1</span></a></li><li><a href="#" data-item="2" class=""><span>2</span></a></li><li><a href="#" data-item="3" class="selected"><span>3</span></a></li></ul>

</div>
</div>

 

 

I know I should communicate to the developers to add ID-tags but they're usually so slow and can take weeks. But This is how I did in a previous and similiar experiment:

 

/*_optimizely_evaluate=force*/
$("body").css({"visibility":"hidden"});
$('document').ready(function(){
$(".slide:eq(1) .gallery-link > img:eq(0), .slide:eq(5) .gallery-link > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/a9ee9f44c7384121aa508c686a59b356.jpg"});
$(".slide:eq(2) .gallery-link > img:eq(0), .slide:eq(6) .gallery-link > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/8acb738b9570444d8ba3fb06dfdb5c19.jpg"});
$("body").css({"visibility":"visible"});
});
/*_optimizely_evaluate=safe*/

 

But I'm not 100% sure on how to modify the variation code. Could I receive help?

 

//H

Level 2

adzeds 02-25-15
 

Re: Carousel images experiment

@henrikb - Thanks for sharing all the code, this should help us to help you.

I am still not 100% sure what it is you are looking to do here?
David Shaw
Level 11
henrikb 02-25-15
 

Re: Carousel images experiment

@adzeds - thanks for such a quick reply!

So there's currently 4 images running in the image carousel on the startpage. I can't reach the images with the visual editior, so in order to change them in the (B) variation I need to write the variation code and add it i variation code tab.

So problem #1, none of the images have an ID-tag. They're all highlighted above: <div class="slide">.

I need a way to tell the variation code that image 1 will load this specific image, kind of like in my example for previous project:

$(".slide:eq(1) .gallery-link > img:eq(0), .slide:eq(5) .gallery-link > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/a9ee9f44c7384121aa508c686a59b356.jpg"});

But the code is very different and I'm lost what to switch around. I want to be able to figure this out by myself since I've already succeeded once before. Best, H
Level 2
adzeds 02-25-15
 

Re: Carousel images experiment

Ok. I understand.
Having a quick look and a guess I would suggest that the following might work:


$("body").css({"visibility":"hidden"});
$('document').ready(function(){
# Slider image one
$(".slide:eq(0) > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/a9ee9f44c7384121aa508c686a59b356.jpg"});

 

# Slider image two
$(".slide:eq(1) > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/a9ee9f44c7384121aa508c686a59b356.jpg"});

 

# Slider image three
$(".slide:eq(2) > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/a9ee9f44c7384121aa508c686a59b356.jpg"});

 

# Slider image four
$(".slide:eq(3) > img:eq(0)").attr({"src":"http://cdn.optimizely.com/img/1759650872/a9ee9f44c7384121aa508c686a59b356.jpg"});
$("body").css({"visibility":"visible"});
});


You need to change the urls for the images that you want to call for each slide.

David Shaw
Level 11
henrikb 02-26-15
 

Re: Carousel images experiment

@adzeds Thank you so much David.

And If I want link the image to add a Hyperlink

where would I add the code:

<a href="url"</a>

Level 2
adzeds 02-26-15
 

Re: Carousel images experiment

# Slider image one

$( ".slide:eq(0) > img:eq(0)" ).wrap( "<a href='url'></a>" );

 

# Slider image two

$( ".slide:eq(1) > img:eq(0)" ).wrap( "<a href='url'></a>" );

 

# Slider image three

$( ".slide:eq(2) > img:eq(0)" ).wrap( "<a href='url'></a>" );

 

# Slider image four

$( ".slide:eq(3) > img:eq(0)" ).wrap( "<a href='url'></a>" );

David Shaw
Level 11
adzeds 02-26-15
 

Re: Carousel images experiment

Looking good. Glad you got it working.

Drop me a message if you need help with anything else.
David Shaw
Level 11