You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 14-04-2014 09:48:43

Jekis
Contributors
Registered: 10-04-2014
Posts: 31

Insert Image

Hello everyone, tell me how to insert images in the second slide? Screenshot....
image.png

Offline

#2 14-04-2014 11:00:12

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Insert Image

You can do it by inserting HTML code as a value to into "text" key which inserts images so:
(original code taken from clear version of v4b3.1)

$tile[] = array("type"=>"slidefx","group"=>1,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"#333","url"=>"external:img/metro_slide.png",
	"text"=>"<img src='path_to_image' alt=''/>","img"=>"img/metro_slide_300x150.png","classes"=>"lightbox"
);

As I checked it's good to place image into <div></div> tag and add styles to img, i.e.:

"text"=>"<div style='float:left'><img src='img/metro_slide.png' style='width:80%;float:left;'/></div>"

because if image is big, you'll have problem with placing it into this kind of tile because there is rather small amout of space for content (text) in it (0.4 width of tile - plugins/tileslidefx/plugin.js line 4).

Last edited by chrismaliszewski (14-04-2014 11:11:12)

Offline

#3 14-04-2014 13:22:38

Jekis
Contributors
Registered: 10-04-2014
Posts: 31

Re: Insert Image

Did as you said, now it turns out .... screenshot

image.png

Code:

[== PHP ==]
$tile[] = array("type"=>"slidefx","group"=>0,"x"=>1,"y"=>1,'width'=>2,'height'=>1,"background"=>"#333","url"=>"exchange.php",
    "text"=>"<div style='float:left'><img src='img/icons/icon_exchange_128.png' style='width:80%; float:left;'/></div>","img"=>"img/exchange_slide2.png","imgSize"=>1,
    "slidePercent"=>0.40,
    "slideDir"=>"up", // can be up, down, left or right
	"doSlideText"=>true,"doSlideLabel"=>true,
	
);

Offline

#4 14-04-2014 13:33:00

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Insert Image

Slide effect is applied to both images tongue

Fix that by opening plugins/tileslidefx/plugin.js

and replacing line 23:

img = $item.find('img').attr( 'src' ),

with

img = $item.find(".imgWrapper").children('img').attr( 'src' ),

Offline

#5 14-04-2014 13:38:20

Jekis
Contributors
Registered: 10-04-2014
Posts: 31

Re: Insert Image

It worked great thank you so much! smile

Offline

#6 15-04-2014 08:40:30

Jekis
Contributors
Registered: 10-04-2014
Posts: 31

Re: Insert Image

Hi people. Incorrectly worked through slide in IE 11. Incorrectly disclosed slide. screenshot:
image.png
image.png

Offline

#7 15-04-2014 12:36:56

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Insert Image

Hmm, looks like a problem with the 3D in IE11. Anyway, you can make it 2D by setting
in plugins/tileslidefx/plugin.js

line 19:
$.browser.version>10

to

$.browser.version>11

Maybe the overlapping is fixed too. (if it's not, you need to set a very low z-index and position:relative; to the image that must be covered)

Offline

#8 15-04-2014 12:51:46

Jekis
Contributors
Registered: 10-04-2014
Posts: 31

Re: Insert Image

Did not help. On your main site the same thing happens slide "Examples & Themes"!

Offline

#9 15-04-2014 14:46:51

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Insert Image

Problem is with z-index.

There is a way to repair a problem in IE11 but after that problem occures in Opera & Chrome.

Solution for this issue would be detecting browser and depending which is used display image with different z-index. But I couldn't correcly detect IE11 browser without simple code (only more complex which I didn't like because it would require MANY changes in current plugin version).

Code changes in plugins/tileslidefx/plugin.css:
comment line with z-index in .tileSlideFx>.slideText (*),
comment line with z-index  in.tileSlideFx img.
(*) This line must be set to -1 for IE11 browser and to 0 for Opera and Chrome - this is a cause of requirement of detection of browser. Detection should be made in plugin.js file and add additional class to .slideText i.e. ie1, opera, other and than in CSS file new styles must be created for

.slideText .BROWSER_CLASS { z-index: X; }

That was what I got and figured out. Only simple detection of browser is required because $.browser.name is undefined for IE11 (at least in my case).

Last edited by chrismaliszewski (15-04-2014 14:48:49)

Offline

#10 15-04-2014 14:54:24

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Insert Image

Browser is already detected by the template. To apply some CSS for a particular browser, just use

.chome .theClassYouWantToApplyItTo {
}

(check the html classes in a console, I don't know the names exactly wink )

Anyway, I'll look to it.

Offline

#11 15-04-2014 15:29:23

Jekis
Contributors
Registered: 10-04-2014
Posts: 31

Re: Insert Image

Do you have slide on the website "Typography", you could write code!

Offline

#12 15-04-2014 16:08:46

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Insert Image

Jekis wrote:

Do you have slide on the website "Typography", you could write code!

?


The problem in IE11 was the browser-detection code. I did some changes in the slide plugin and in hte js/plugins.js file

new files are here: https://www.dropbox.com/s/tfehfmlxdxx1v … d_ie11.zip

Didn't check the image thing but guess that'll work too.

Offline

#13 16-04-2014 08:09:46

Jekis
Contributors
Registered: 10-04-2014
Posts: 31

Re: Insert Image

Thanks, but now does not work in Chrome, I had to use another varinat slide.

Offline

#14 16-04-2014 09:23:04

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Insert Image

When I copy all files as you said Thomas, plugins doesn't work.

To make it works you need to restore old CSS file, and change line 2 in new plugin.js to

is_supported = $.browser.name!="msie" && $.browser.name!="opera";

and it finally works in all browsers smile.

Offline

#15 16-04-2014 13:47:47

Jekis
Contributors
Registered: 10-04-2014
Posts: 31

Re: Insert Image

Now is not working correctly in IE11!

Offline

#16 16-04-2014 13:50:55

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Insert Image

Did you change your js/plugins.js file?

Offline

#17 16-04-2014 14:26:02

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Insert Image

I have code

* jQuery Browser Plugin 0.0.6

in it so yes (I wasn't sure smile).

Changes I made were required mostly because of wrong CSS. But still after repairement of CSS there was a problem with z-index. That's why changes in plugin.js where required.

Last edited by chrismaliszewski (16-04-2014 14:29:32)

Offline

#18 16-04-2014 16:24:18

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Insert Image

Do you see any error/problem on this website? ( http://metro-webdesign.info/ )
the slide tile works for me in every browser (though no 3D effect in IE)

Offline

#19 16-04-2014 17:19:25

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Insert Image

Yes, there is an error in Opera 12.16 (Opera with old browser engine). Screenshot. In new Opera 18> there in no error in the same place.

After my update there is no such a thing.

Last edited by chrismaliszewski (16-04-2014 17:22:01)

Offline

#20 16-04-2014 17:34:27

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Insert Image

Oh I see. Indeed, I test in the latest Opera. Would it be necessary to support older versions?

Offline

#21 16-04-2014 17:42:53

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Insert Image

I think, yes. Some people (including me) hates new Opera because of lack of many features from previous version. So many people which uses Opera 15< don't want to use Opera 15>. Question is, which version of Opera mobile version is. I don't know.

The other thing is nowadays I hate Opera (version <15>) and I use Chrome but I still check my pages in all browsers.

Last edited by chrismaliszewski (16-04-2014 17:52:06)

Offline

#22 06-08-2014 12:19:06

hamza7t
Contributors
Registered: 05-08-2014
Posts: 12

Re: Insert Image

I adjusted the tile as u said but i still hava a problem with the image . http://postimg.org/image/9o3pthgjj/

[== PHP ==]
$tile[] = array("type"=>"slidefx","group"=>4,"x"=>0,"y"=>1,'width'=>2,'height'=>1,"background"=>"#BA1D47","url"=>"http://google.com","img"=>"img/group4-3.png","text"=>"<div style='float:left;'><img src='img/group3-7f.png' style='width=80%;float:left'/></div>",
);

edit: and this is not working on firefox.. it shows the same image twice

Last edited by hamza7t (06-08-2014 12:28:19)

Offline

#23 06-08-2014 14:12:52

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Insert Image

First of all change width=80% to width:80% smile. I checked code you gave me with this small change in all browsers I have (IE11, FF31, Chrome36, Opera15, Opera18) and everything works for me. To prove it, I'm sending screenshot.

Please send your website address so I can check where the problem can be and maybe I'll find a way to help you.

PS. Be sure that you did all things mentioned above.

Last edited by chrismaliszewski (06-08-2014 14:14:10)

Offline

#24 07-08-2014 08:56:24

hamza7t
Contributors
Registered: 05-08-2014
Posts: 12

Re: Insert Image

yes  big_smile...i have the same as your picture now ,Thanks
but the main problem is the picture doesn't fit inside that red background that u can see in your pic.

edit: i solved it by changing the background color and worked for now but i don't think that this solution will work with other images.

Last edited by hamza7t (07-08-2014 09:08:00)

Offline

#25 07-08-2014 11:34:47

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: Insert Image

To solve the problem for other iimages you'll need to change width property for image proper fitting. I can't give you more from my side, I'm sorry.

Offline

Board footer

Powered by FluxBB